样式权重
元素会被多个样式一层层作用,这就是层叠样式表的来源。如果多个样式做用在元素上就会产生优先级权重问题。
使用类、ID、伪类都有不同的权重,具体应用哪条规则要看权限大小。
- 相同权重的规则应用最后出现的
- 可以使用
!important
强制提升某个规则的权限 -
权重应用
规则 粒度 ID 0100 class,类属性值 0010 标签,伪元素 0001 * 0000 行内样式 1000 下面是ID权限大于CLASS的示例
-
<style> .color { color: red; } #hot { color: green; } </style> <h2 class="color" id="hot">id权重大</h2>
属性权重的示例
<style> /* 权重:0021 */ h2[class="color"][id] { color: red; } /* 权重:0012 */ article h2[class="color"] { color: blue; } </style> <article> <h2 class="color" id="hot">权重计算</h2> </article>
行级权重优先级最高
<style> /* 权重:0012 */ article h2[class="color"] { color: blue; } #hot { color: black; } </style> <h2 class="color" id="hot" style="color:green;">行级权重最高1000</h2>
强制优先级
有时在规则冲突时,为了让某个规则强制有效可以使用 !important。
<style> h2 { color: red !important; } h2 { color: green; } </style> <h2>强制提升优先级</h2>
两条规则权限一样,默认应用第二个规则,但第一个规则使用了
!important
提升了权限,所以被应用。!important主要用于覆盖行内样式。我们尽量不要使用!important,尽量用class。
继承规则
子元素可以继承父元素设置的样式。
- 子元素并不是全部样式。比如边框、高度等并不会继承。
- 继承的规则没有权重
-
<style> article { color: red; border: solid 1px #ddd; } </style> ... <article> <h2>颜色继承 <span>继承article设置的颜色</span></h2> </article>
上例中 h2 标签没有设置颜色样式,将继承
html
的颜色,并且边框没有产生继承。
我们也可以修改默认是否继承:
四个通用属性值
css 为控制继承提供了四个特殊的通用属性值,每个 css 属性都能使用这些值。
- inherit
设置该属性会使子元素属性和父元素相同。实际上,就是“开启继承”。
- initial
将属性的初始值应用于元素。实际上,就是“重置为默认值”。
- unset
将属性重置为自然值,也就是如果属性是自然继承的那么就是 inherit
,否则和 initial
一样。
- revert
表示使用样式表中定义的元素属性的默认值。若用户定义样式表中显式设置,则按此设置;否则,按照浏览器定义样式表中的样式设置;否则,等价于 unset 。(属性值 revert
目前只有很少的浏览器支持)
css3 增加了 all
属性,其值可以是上面四个之一,表示重置元素所有属性的值重置为其初始值,或继承值。
.test{
all: initial;
all: inherit;
all: unset;
all: revert;
}
通配符
在开发中使用*
选择器会有一个问题。因为通配符的权限为0,而继承的规则没有权重,看以下代码产生的问题。
<style>
* {
color: red;
}
h2 {
color: blue;
}
</style>
<article>
<h2>蓝色 <span>颜色不发生变化</span></h2>
</article>
h2
中的span并没有继承 h2
的颜色,就是因为继承没有权重。而使用了 *
权重为0的规则。