CSS规则的优先级关系
优先级可以精确计算:
| !important | Style属性 | #ID | .Class/伪类/属性选择器 | 标签 |
|---|---|---|---|---|
| 0 | 0 | 0 | 0 | 0 |
同值,按规则定义的先后顺序。
避免用!important和标签的style属性。
层叠和继承
HTML:
<div class="list list-member">
<ul>
<li>Member ID1</li>
<li>Member ID2</li>
<li>Member ID3</li>
</ul>
</div>
CSS:
.list li {
margin: 10px 0 0 0;
font-size: 14px;
color: #666;
}
.list-member li {
font-size: 12px;
}
根据CSS优先级将两条规则加在一起。实际为:
margin: 10px 0 0 0;
font-size: 12px;
color: #666;
继承,子元素可以继承父级的属性:
- 文本样式:
font-familyfont-sizefont-stylefont-variantfont-weightletter-spacingline-heighttext-aligntext-indenttext-transformword-spacing
- 列表样式:
list-style-imagelist-style-positionlist-style-typelist-style
- 颜色:
color - 字号是相对值:如
font-size:80%,会计算相对值