CSS选择器及选择器权重

id选择器

• 语法：#id属性值{}
  #box{} #red{}

类元素选择器

• 语法：.class属性值{}

---

通配选择器

• 作用：选中页面中的所有元素
• 语法：*{}

---

交集选择器

• 作用：选中同时符合多个条件的元素
• 语法：选择器1选择器2…选择器n{}
  - 交集选择器中如果有元素选择器，必须使用元素选择器开头
  div.weight{ … }

---

选择器分组（并集选择器）

• 作用：同时选择多个选择器对应的元素
• 语法：选择器1，选择器2，…，选择器n{}
  h1, span{ … }
#b1, .p1, h1, div.weight { … }

---

子元素选择器

• 作用：选中指定父元素的指定子元素
• 语法：父元素 > 子元素{}
  div > span { … }

后代选择器

• 作用：选中指定元素内的指定后代元素
• 语法：祖先 后代{}
  div span { … } //范围比子元素更广

兄弟元素选择器

• 作用1：选择下一个兄弟
• 语法1：前一个 + 下一个{}
  p + span{ … } // 紧挨着（下一个）
• 作用2：选择下边所有的兄弟
• 语法2：兄 ~ 弟{}
  p ~ span { … } // 下边的所有的兄弟元素 （上边的兄弟不选）

---

属性选择器

• [属性名] 选择含有指定属性的元素
• [属性名 = 属性值] 选择含有指定属性和属性值的元素
• [属性名 ^= 属性值] 选择属性值以指定值开头的元素
• [属性名 $= 属性值] 选择属性值以指定值结尾的元素
• [属性名 *= 属性值] 选择属性值中含有某值的元素的元素

---

伪类选择器

• 伪类（不存在的类、特殊的类）
  • 伪类用来描述一个元素的特殊状态
    比如：第一个子元素、被点击的元素、鼠标移入的元素…
  • 伪类一般情况下都是使用 :开头
    :first-child // 第一个子元素
    :last-child // 最后一个子元素
    :nth-child( n ) // 选中第n个子元素
    • 特殊值：
      • n 第n个 n的范围0到正无穷
      • 2n 或 even 表示选中偶数位的元素
      • 2n+1或 odd 选中奇数位的元素
  • 以上这些伪类都是根据所有的子元素进行排序
    :first-of-type
:last-of-type
:nth-of-type
    • 这几个伪类与上述类似，不同点是它们在同类型元素中排序
  • :not( ) 否定伪类 ：将符合条件的元素从选择器中去除
  • :link用来表示没访问过的链接（正常的链接）
  • :visited用来表示访问过的链接 (只能修改链接的颜色)
  • :hover 用来表示鼠标移入的状态
    • :active 用来表示鼠标点击

伪元素选择器

• 伪元素：表示页面中一些特殊的并不真实存在的元素（特殊的位置）
  • 伪元素使用 :: 开头
    ::first-letter 表示第一个字母
    ::first-line 表示第一行
    ::selection 表示选中的内容

::before 元素的开始
::after 元素的最后
- before 和 after 必须结合content属性来使用

---

选择器权重

选择器	权重
内联样式	1,0,0,0
id选择器	0,1,0,0
类和伪类选择器	0,0,1,0
元素选择器	0,0,0,1
通配选择器	0,0,0,0
继承的样式	没有优先级

• 比较优先级时，需要将所有的选择器的优先级进行相加比较，优先级高的先显示（分组选择器是单独计算的）
• 选择的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
• 如果优先级计算后相同，此时优先使用靠下的样式
• 在某一个样式后面添加 !important ，则该样式会获取到最高的优先级，甚至超过内联样式（在开发中慎用）