css穿透（css穿透属性）

本篇文章给大家谈谈css穿透，以及css穿透属性对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、CSS样式优先级及穿透
• 2、vue项目css样式穿透
• 3、CSS 关于样式穿透
• 4、CSS 鼠标点击穿透Div
• 5、我可以用CSS字体敲出/穿透透明吗
• 6、css pointer-events 为什么会导致事件可以穿透div

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  }

vue项目css样式穿透

1.scss样腔谈式穿透

2.less使用 /deep/

3.stylus使用颤圆没茄纳

[img]

CSS 关于样式穿透

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

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

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

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

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

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');

我可以用CSS字体敲出/穿透透明吗

color: rgba(0,0,0,0.3);前三个是颜中迟衫色的卖腔rgb值，最后一个是透明度。可以实现字体透旦毕明

css pointer-events 为什么会导致事件可以穿透div

并不是poin...导致事件穿透，弯兆而是事件本身存在冒泡行为，可以备粗从原对象逐层向上仿闹镇传递。poin...只是控制了这个默认行为。

关于css穿透和css穿透属性的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。