CSS3选择器及其优先级

选择器

优先级规则

1. 最近的祖先样式比其他祖先样式优先级高

2. 内联样式比祖先样式优先级高

3. 内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器

4. 优先级计算：按abcd的顺序依次比较大小，大的优先级高，相等则比较下一个。最后都相等，按照“就近原则”判断

   abcd（级别）	计算方式
   a	一般为0，除非在标签上使用style属性
   b	id选择器的数量
   c	类选择器、属性选择器和伪类选择器的总和
   d	标签选择器和伪元素选择器的总和

5. 属性后插有!important的属性拥有最高优先级，若同时插有!important，再根据规则3、4判断优先级

分类

CSS3增加了属性选择器、伪类选择器、过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，让编写代码更加轻松

基本选择器

• 通配选择器 *
• 元素选择器
• ID选择器 #id
• 类选择器 .class
• 群组选择器

层次选择器

• 后代选择器 E F：选择匹配的F元素，且匹配的F元素被包含在匹配E元素内
• 子选择器 E > F：选择匹配的F元素，且匹配的F元素是所匹配的E元素的子元素
• 相邻兄弟选择器 E + F：选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
• 通用选择器 E~F：选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

伪类选择器

动态伪类选择器

• 链接伪类选择器
  • :link 匹配元素被定义了超链接并未被访问过
  • :visited 匹配元素被定义了超链接并已被访问过
• 用户行为选择器
  • :active 匹配元素被激活
  • :hover 用户鼠标停留在元素上
  • :focus 匹配元素获取焦点

目标伪类选择器

• :target 匹配元素被相关url指向

语言伪类选择器

UI元素伪类选择器

• :checked 选中状态伪类选择器
• :enabled 启用状态伪类选择器
• :disabled 不可用状态伪类选择器

结构伪类选择器

• :first-child 匹配该元素作为第一个元素
• :last-child 匹配该元素作为最后一个子元素
• :root 匹配元素所在文档的根元素，在HTML中，根元素始终是html
• E F:nth-child(n) 父元素E的第n个子元素F，n起始为1
• E F:nth-last-child(n) 父元素E的倒数第n个子元素F
• E:nth-of-type(n) 类型为E元素的第n个E元素
• :nth-last-of-type(n) 类型为E元素的倒数第n个E元素
• :first-of-type 类型为E元素的第1个E元素
• :last-of-type 类型为E元素的最后一个E元素
• :only-child 选择父元素只包含一个子元素
• :only-of-type 选择父元素只包含一个同类型子元素
• :empty 没有子元素的元素，也不包含任何文本节点

否定伪类选择器

• E:not(F) 匹配所有除元素F外的E元素

伪元素

属性选择器

• [attribute] 选取带有指定属性的元素
• [attribute = value] 选取带有指定属性和值的元素
• [attribute ~= value] 选取属性值中包含特定词汇的元素
• [attribute |= value] 选取带有以指定值开头的属性值的元素
• [attribute ^= value] 匹配属性值以指定值开头的每个元素
• [attribute $= value] 匹配属性值以指定值结尾的每个元素
• [attribute *= value] 匹配属性值中包含指定值的每个元素