CSS 选择器

简单的三种选择器

元素选择器

元素选择器还包含一个特殊的全局选择器（*)，它选中了父元素中的所有内容，如果没有父元素，则表示选中文档中的所有内容。全局选择器的作用还可以参考p和:first-child之间的空格。

span {
    background-color: yellow;
}

类选择器

以一个句点（.）开头。

.highlight {
    background-color: yellow;
}

类选择可以附加到元素选择器上使用，中间不要空格或者逗号，表示选择拥有某个类的特定类型元素。

h1.highlight {
    background-color: yellow;
}

同样，多个类选择器也可以同时使用，表示选择同时拥有多个类名的元素。

.warning.highlight {
    background-color: yellow;
}

id选择器

以一个句点（#）开头，id 属性在文档内必须是唯一的。所以尽管它可以和其他选择器叠加使用，但是由于其唯一标识性，我们可以忽略这些用法。 id选择器优先于大多数其他选择器。所以很难处理它们。大多数情况下，给一个元素加个类，而不是使用 id，会更好。

属性选择器

1. [attr] : 匹配带有一个名为 attr 的属性的元素

p[title] // 匹配带有 `title` 属性的 p 元素

2. [attr=value] : 匹配带有一个名为 attr 的属性,且值等于 value 的元素

p[class='aaa'] // 匹配 `class` 属性为 `aaa` 的 p 元素，相当于 p.aaa

3. [attr~=value] : 匹配带有一个名为 attr 的属性,且值包含 value 的元素

p[class~='aaa'] // <p class='aaa bbb'>hello</p> 可以被选中

4. [attr|=value] : 匹配带有一个名为 attr 的属性,且值等于 value，或者值以 value 开头，后面跟连字符 - 的元素

p[class|='aaa'] // <p class='aaa-bbb'>hello</p> 可以被选中

5. [attr^=value] : 匹配带有一个名为 attr 的属性,且值以 value 开头
6. [attr$=value] : 匹配带有一个名为 attr 的属性,且值以 value 结尾
7. [attr*=value] : 匹配带有一个名为 attr 的属性,且值至少含有一个 value

value 是大小写敏感的，如果希望不区分大小写，需要在中括号最后加一个 i，[attr=value i]

伪类和伪元素

伪类

伪类：用于选择处于特定状态的元素，也就是伪类其实是为了描述一个现有元素的，例如: :hover，:focus，:first-child ...，关于伪类写法的疑惑，可以查看 p和:first-child之间的空格。

伪元素

伪元素：伪造一个元素。例如 ::after，::before，::first-line ...，伪元素开头为双冒号::，现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。

1. ::first-line ：只会选中第一行，第一行并不是一个元素，所以是伪类。
2. ::before 和 ::after ：和 content 属性一同使用，使用 CSS 将内容插入到你的文档中。

伪类和伪元素可以叠加使用，可以在 MDN 上查看所有的伪元素和伪类。

关系选择器

后代选择器

用 单个空格（" "） 字符——组合两个选择器

.box p {
    color: red;
}  

子代关系选择器

用大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。

邻接兄弟选择器

用加号（+）选中处于同一父元素下的相邻子元素。

    p + img   // 选中所有紧随<p>元素之后的<img>元素

兄弟选择器

用波浪号（~）选中处于同一父元素下的兄弟元素，不必相邻。

选择器列表

可以使用逗号（,）分割，表示多个选择器并列。选择器列表中如果有一个选择器书写错误，整个列表的样式都不会生效。

.warn, .error {
   font-size: 12px
}