css样式穿透web组件，css 样式穿透

用webpack打包的vue组件怎么引入css样式跟js样式

按需组件引入吧，这样会减少不必要的css，当然你每个组件的css要独立出来，而且如果使用webpack的vue-loader处理即使重复引用同一个组件css也是同用一份，不会额外的复制多个.CSS规则的前面；@import规则条件规则组中。

相关问答

Q1: CSS样式优先级及穿透

CSS优先级是根据等级的值相加得出选择器的权重来决定的。

!important 行内样式 ID 类、伪类、属性 标签名 继承 通配符

计算权重方式：

从图上看讲权重分为：

1. 第一等：代表内联样式，如: style=””，权值为1000。

2. 第二等：代表ID选择器，如：#content，权值为0100。

3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。

4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

5. 通配符、子选择器、相邻选择器等的。如*、、+,权值为0000。

6. 继承的样式没有权值。

当权重一样时遵循准则：

1. 选择器越 具体 优先级越 高

2. 在同一个级别的情况下， 最后 指定的规则优先级就越 高 ，也就是我们通常说的就近原则；

权重计算例子：

1. li  - 0 0 0 1 权重为 1

2. h1 + *[rel=up] -0 0 1 1 这个相邻选择器由标签选择器与属性选择器组成，属性选择器为10，因此权重为11

3. ul ol li.red - 0 0 1 3 权重为13

4 li.red.level - 0 0 2 1 权重21

1. !important  （width: 100% !important）

2. 行内样式   (style="width:100%")

3. id选择器  (#myIdName)

4. class选择器  (.myClassName)

5. 标签选择器  (div,h1,p)

1. 使用 " " 符号，这种方式主要是用于普通css，方式为：

  外层 第三方组件样式： .wrapper .swiper-pagination { color: #eee  }

2. 使用 "/deep/" ,这种方式主要用于sass或less，方式为：

外层 /deep/ 第三方组件样式： .wrapper /deep/ .swiper-pagination { color: #eee  }

Q2: web前端，css样式

-webkit-box、-moz-box、-o-box、-ms-box、box这些都是指同一个属性即box，前面带有-号的是分别针对不同的浏览器的，其中

-webkit- 针对Chrome和Safari浏览器

-moz- 针对FireFox浏览器

-o- 针对Opera浏览器

-ms- 针对IE浏览器

也就是说凡是带有这样的前缀的都是这些浏览器的私有属性，只有各自的浏览器内部才有效。之所以这样，是因为有些css属性是带有实验性质的（尤其是css3），各主流浏览器尚未对它完全支持，这样就会使用私有属性来进行试验，而其他浏览器则会自动忽略该属性。因此，网页为了兼容各种不同的浏览器，就会把所有的私有属性都放上去，也包括不带前缀的标准属性。而浏览器的版本众多，很可能低版本的浏览器对某个属性处于试验性质，而高版本则已经完全支持了（也就是说可以不用前缀了），比如box属性就是如此，因此你把其他带有前缀的属性去掉不影响效果。但是，既然是网页，就不会是只有你一个人看的，要是其他用户用的是低版本的浏览器呢？所以，从兼容性角度出发，你最好不要删掉这些属性，除非你能保证其他用户用的浏览器与你的完全一样。

Q3: CSS 鼠标点击穿透Div

CSS 鼠标点击穿透Div

有些时候网页中用到了一些绝对定位的Div，因为需要事先这个Div是隐藏的，但是它所在的位置会遮挡住鼠标点击事件。这个时候可以用CCS3中的pointer-events属性来解决。

//穿透该层

pointer-events:none;

//恢复点击处理

pointer-events:auto;

根据情况来动态修改Div的pointer-events属性即可。

例如用JQuery可以这样写：

//穿透该层

$('#dvTest').css('pointer-events', 'none');

或者

恢复点击处理

$('#dvTest').css('pointer-events', 'auto');

Q4: CSS 关于样式穿透

前两天在项目中遇到一个问题，需要手动去修改引入的第三方组件的CSS样式，我第一想法就是直接在组件上新增一个自定义的class去覆盖原有的样式，结果当然是行不通的（不然我现在也不会在这里写这篇）。

于是我查了一下，是因为我在vue组件里面将设置成了局部样式，局部样式只在当前组件生效，对引入的其他组件是无法起作用的。然后我试了一下，把 scoped 去掉就行了。

或者在组件里面写多一份全局样式

但是如果不在style里面写 scoped ，直接写成全局样式，最后可能会面临多个组件之间样式污染的问题。如何使得局部样式可以覆盖到引入的第三方组件呢，我想到以前涉及过的一个名词 样式穿透 ，立刻实践了一下，果然就成了。

样式穿透 需要定义一个外层的style，通过 可以使得socped属性下的的样式穿透到全局， 外层 第三方组件 或者 外层 /deep/ 第三方组件 。 是 /deep/ 的别名，但是在sass之类的样式预处理器之中无法正确解析。

Q5: vue样式穿透

vue的style中设置scoped属性后，组件实现样式私有化。

但是该组件又使用的其他组件库时(vant,elementui,自定义等)，该组件的style中的样式，优先级低，不生效，这个时候需要使用样式穿透(作用得更深)。

通过图片可以看到scoped底层是通过在 DOM节点 中添加 data-v-xxx ， CSS 中通过添加 [data-v-xxx] 属性过滤，提高优先级，来实现样式的私有化。

看一个场景实例：子组件根元素颜色为 红色 ，非根元素为 蓝色 。

父子两个组件 style 都使用 scoped 属性，在不修改子组件的前提下，在父组件上修改子组件的颜色为 绿色 。

当加上样式穿透后

vue 中针对不同的样式类型( css , less , scss )有不用的样式穿透方法。

css样式穿透web组件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css 样式穿透、css样式穿透web组件的信息别忘了在本站进行查找喔。