CSS选择器

种类

种类有差不多10种：

• ID选择器：如#app

• 类选择器：如.box

• 类型选择器：如h1

• 标签属性选择器：如a[title]

• 关系选择器

  • 子代选择器：如p > span

  • 后代选择器：如p span

  • 临接兄弟选择器：如p + img，选择所有紧跟在p后的img

  • 通用兄弟选择器：如p ~ img

• 通配选择器：*

• 选择器列表：如

h1, .special {
  color: blue;
} 

• 伪类选择器：如a:hover

• 伪元素选择器：如::before、p::first-line

选择器权重

• 0100

  • ID选择器

• 0010

  • 属性选择器

  • 类选择器

  • 伪类选择器

• 0001

  • 元素选择器（类型选择器）

  • 伪元素选择器

• 0000

  • 通配选择器

无视DOM树距离

下面的代码还是后面的覆盖前面的。

body h1 {
  color: green;
}

html h1 {
  color: purple;
}