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-family
font-size
font-style
font-variant
font-weight
letter-spacing
line-height
text-align
text-indent
text-transform
word-spacing
- 列表样式:
list-style-image
list-style-position
list-style-type
list-style
- 颜色:
color
- 字号是相对值:如
font-size:80%
,会计算相对值