CSS - 选择器、优先级

选择器

1. 元素选择器
   寻找特定类型的元素(html标签)
   如:p / h1 / div 等

2. ID选择器
   寻找具有指定id名的元素
   如: #intro / #myDiv 等

3. 类选择器
   寻找具有指定class名的元素
   如: .tool-bar / .header 等

4. 伪类选择器
   根据特定的条件(状态)对元素应用样式
   如: a:link / a:visited / tr:hover / a:active / input:focus 等

5. 后代（组合）选择器
   根据文档结构的层次关系及状态, 组合使用各类选择器
   如: div p {} / #myDiv span {} / a:visited:hover {} 等

6. 通用选择器
   对某个元素的所有后代应用样式
   如:
   * {} 对元素应用样式
#myDiv * {} 对id为myDiv的元素的所有后代应用样式

CSS2.1 和 CSS3 中的高级选择器

1. 子选择器
   #nav > li {} 选择 #nav 下为 li 的直接元素(即子元素), 不包括孙元素(IE7+)

2. 相邻同胞选择器
   h2 + p {} 选择同一父元素下, 某个元素之后的元素, 此为 h2 后的 p 元素样式(IE7+)

3. 属性选择器
   img[title] {} / a[rel="nofollow"] {} 选择存在某个属性或属性值的元素

优先级与权重计算

越特殊的选择器的权重值越高, 应用优先级高的规则.
特殊性相同, 应用后定义的规则.

特殊性的约定:
分成4个等级 a, b, c, d; 组成一个数字
a = 1/0    有/无行内样式
b = ID选择器的总数
c = 类+伪类+属性选择器的总数
d = 元素选择器+伪元素选择器的总数

eg:
style="" 优先级为1000
#wrapper #content 优先级为0200
#content .date 优先级为0110
div#content 优先级为0101
div p 优先级为0002

一般简单的来说, 行内样式 > id样式 > 伪类样式 > 属性样式 > 类样式 > 元素样式 > 通用样式

ps: 如果是有!important;，那么会减少原本应该赋给其他元素的权重，覆盖掉其他样式。

CSS 的解析

CSS的解析是从右往左解析的，这样做是为了减少在CSSOM树上的匹配查找。
所以代码中可减少使用通用选择器，并缩短查找匹配路径。

关于 html/css 结构的设计和维护

HTML整站结构设计
CSS设计中的不变与可变