优先级

!important > 内联样式 > ID > 类 | 伪类 | 属性 > 元素 | 伪元素

选择器

• 基本选择器

  • 通用选择器 *

  • 元素选择器 div

  • 类选择器 .

  • ID选择器 #id

  • 属性选择器

    • [attr] 表示有 attr 属性的元素

    • [attr=val] 表示有 attr 属性且值为 val 的元素

    • [attr~=value] 表示有 attr 属性且该属性是一个以空格作为分隔的值列表， 其中至少有一个值为 value。

    • [attr^=val] 表示有 attr 属性且属性值是以 val 开头的元素。

    ...

    a[href^='#']

• 分组选择器

  • 后代组合器 div span => 找出所有div内的span

  • 直接子代组合器 ul > li => 找出所有ul内子元素标签是li的所有子元素

  • 一般兄弟组合器 p ~ span => 找出同一父元素下, p元素后的所有span元素

  • 紧邻兄弟组合其 h2 + p => 找出同一父元素下, h2元素后面的那一个p元素

• 伪选择器

  • 伪类选择器 a:visited 找出所有曾被访问过的 a 元素

  • 伪元素选择器 p::first-line 找出所有 p 元素的第一行