一、选择器

元素选择器

元素选择器是最基本的选择器。也是最简单的选择器。可以选择某个或者某些标签

h1, h2 {
    color: red; 
    background: gray;
}

上面的 CSS 会将所有的 h1 和 h2 标签变成红色,背景变成灰色。

通配选择器

可以选择所有元素，或者说是整个文档

* {color: red}

上面的选择器可以让整个文档变成红色

类选择器

选择一类元素，必须在标签上指定 class 的属性值。

*.warning {font-weight: bold}

这段 CSS 会选中下面 html 代码中的 p 标签和 text 标签：

<div>
    <p class="warning">被选中</p>
    <text class="warning">被选中</text>
</div>

注意，这里的选择器前面包含了一个星号（*）这里的星号是通配符的含义，即任意元素的 class 属性中如果包含 warning 即会被选中。由于星号是通配符，所以也可省略掉，像下面这样：

.warning {font-weight: bold}

效果是一样的。

你也可以指定某个特定的标签，例如：

p.warning {font-weight: bold}

这段 CSS 只会选中 p 标签，而不会选中 text 标签。不论 text 标签的 class 属性是否包含 warning

多类选择器

class 属性可以包含多个，如果需要选中某个含有两个 class 的标签，可以使用多类选择器。

.warning.uegent {background: silver;}

上面这段 CSS 会选中即含有 warning 又含有 uegent 的标签。即下面的 h3 标签。

<div>
    <h1 class = "warning">多类选择器</h1>
    <h2 class = "uegent">多类选择器</h2>
    <h3 class = "warning uegent">被选中</h3>
</div>

这两个词的顺序无关紧要，也可以写成 <h3 class = "uegent warning">。

ID选择器

选中某个id值得标签

#first-h1 {color: red}

上面这段 CSS 会选中 下面的 h1 标签

<div>
    <h1 id = "first-h1">被选中</h1>
    <h2 class = "uegent">ID选择器</h2>
    <h3 class = "warning uegent">ID选择器</h3>
</div>

注意： 在同一个 html 页面中所有元素的 id 是不可重复的，但是 class 是可以重复的。

属性选择器

如果希望选择有某个属性的元素，而不关心具体的属性值。可以使用属性选择器。

简单属性选择器

h1[class] {color: red}

上面的选择器可以选择所有含有 class 的 h1 标签。即下面第二个 h1 标签

<div>
    <h1 id = "first-h1">简单属性选择器</h1>
    <h1 class = "warning uegent">被选中</h1>
</div>

当然也可以使用通配符。下面的 CSS 会选中所有含有 class 属性的标签。

*[class] {color: red}

还可以使用多个属性。下面的 CSS 会选中所有含有 id 和 class 的标签。必须是同时含有两个属性

*[id][class] {color: red}

属性值选择器

可以根据某个属性的具体值来选择标签。

h1[id = "first-h1"] {color: red}

上面的 CSS 表示，选择 id = first-h1 的 h1 标签。即下面的第一个 h1 标签

<div>
    <h1 id = "first-h1">被选中</h1>
    <h1 class = "warning uegent">简单属性选择器</h1>
</div>

当然你也可以多个属性的值一起选择，比如:

a[id = "first-link"][href = "http://zdran.com"] {color: red}

注意： CSS 里的值必须是完全匹配。比如：

*[class = "uegent"]

上面这段 CSS 只能选中 h2 标签，如果需要选择 h3 则需要写成：

*[class = "warning uegent"] {color: red}

属性的值必须是完全一样，才会选中标签

<div>
    <h1 id = "first-h1">属性值选择器</h1>
    <h2 class = "uegent">第一次被选中</h2>
    <h3 class = "warning uegent">第二次被选中</h3>
</div>

部分属性值选择器

上面提到的属性值选择器要求完全匹配，这里的部分属性值选择器要求部分值匹配即可。

p[class ~= "uegent"] {color: red}

这段 CSS 会选中下面的 html 代码中的第二个和第三个标签。因为这两个标签的 class 属性值中都含有”uegent”

<div>
    <p id = "first-p">部分属性值选择器</p>
    <p class = "uegent">被选中</p>
    <p class = "warning uegent">被选中</p>
</div>

子串匹配选择器

类似于正则表达式

*[class^="start"]    // 选中 class 的值以 start 开头的标签
*[class$="end"]    // 选中 class 的值以 end 结尾的标签
*[class*="mid"]    // 选中 class 的值中包含 mid 的标签

特定属性选择器

这个选择器应该是最常见的选择器。以下面的 CSS 为例：

*[lang|="en"]

他会选中 lang 属性的值为 “en” 或者以 “en-“(注意：后面有个短线) 开头的元素。所以会选中下面的前两个 p 标签

<div>
    <p lang = "en">被选中</p>
    <p lang = "en-zh"> 被选中</p>
    <p class = "zh">特定属性选择器</p>
</div>

PS:如果你不理解文档树结构，建议先了解下文档树结构再往下看

后代选择器

也称为包含选择器，或者上下文选择器，它可以选中某个标签下的某些标签。比如，选择 div 下的 p 标签，可以这样写：

div p {color: red}

上面的 CSS 会选中第一个 p 标签，而不会选中第二个 p 标签

<div>
    <p lang = "en">被选中</p>
</div>
<p lang = "en-zh">后代选择器</p>

当然并不局限于两个元素，也可以写成下面这样

html body div p span {color: red}

子元素选择器

选中某个元素的子元素，与后代选择器的区别是，后代选择器可以选中某个元素的子元素，某个元素的子元素的子元素（子孙元素），而子元素选择器只能选择某个元素的子元素。

div > span {color: red}

上面的元素可以选中 div 下的 span 标签，即第一个 span 标签，第二个则无效，而使用后代选择器可以选中两个 span 标签。

<div>
    <span>被选中</span>
    <p>子元素<span>不被选中</span>选择器</p>
</div>

子元素选择器只选择一级，而后代是所有的后代，以及后代的后代

相邻兄弟选择器

选中紧接在一个元素后的元素。

div + p {color: red}

上面这段 CSS 可以选中第二个 p 标签，即 div 后的元素。

<div>
    <p lang = "en">后代选择器</p>
</div>
<p lang = "en-zh">被选中</p>
<div>
    <p lang = "en">不被选中</p>
</div>

相邻兄弟选择器可以和子元素选择器一起使用。例如：

html > body > div + p {color: red}

伪类选择器

链接伪类

伪类选择器可以选择某些元素处于特定状态的元素。比如，可以为已经被点击过的 a 标签添加一个 CSS。

a:visited {color: red}

上面的 CSS 会应用到已经被访问过的 a 标签。对应的，还有一个，选择没有被点击的超链接。

a:link {color: black}

上面的 CSS 会应用到没有被点击过的超链接上。注意，上面的 CSS 只会选中带有 href 属性的 a 标签。

<a href="http://zdran.com">被选中</a>
<a name ="first">不会被选中</a>

当然也可以和其他选择器配合使用，比如:

#my_link:visited {color:red}

动态伪类

a:focues {color: red}

选中获取到输入焦点的 a 标签。

a:hover {color: red}

选中鼠标指针悬停的 a 标签

a:active {color:red}

选中鼠标点击的元素。
PS有兴趣的同学可以试试将这几个伪类同时用到同一个 a 标签上，看看会发生什么神奇的效果。

结构伪类

li:not(.first-item) {color: red}

如果 class 属性中含有 first-item 则不被选中。例如下面的第一个 li 标签将不被选中

<ul>
    <li class="first-item">不被选中</li>
    <li>被选中</li>
    <li>被选中</li>
</ul>

li:first-child {color: red}

选中第一个元素。

<ul>
    <li>被选中</li>
    <li>不被选中</li>
    <li>不被选中</li>
</ul>

同样还有选中最后一个元素的伪类

li:last-child {color:red}

还有一个可以根据一个参数来选择第几个元素。

ol :nth-child(2n) {color: red}

上面的 CSS 可以选中第 2n 个元素，即第2、4、6、8、10… 位置的元素。如果想选奇数位置的元素，可以设置为：

ol :nth-child(2n+1) {color: red}

如果想只选择第几个元素，可以直接写成具体的值，比如只选择第 5 个元素，可以设置为：

ol :nth-child(5) {color: red}

nth-child 可以接收一个 an+b 的参数，可以根据 a 和 b 的值计算具体的位置。

表单伪类

选中 任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者option(select中的一项)

input:checked + label {color: red}

上面的 CSS 会选中下面被勾选的选项

<div>
  <input type="checkbox">
  <label >勾选后，被 CSS 选中</label>
</div>

如果是 radio 可以这么写：

input[type="radio"]:checked {color:red}

选中下面的一个勾选后的选项

<div>
  <input type="radio" name="my-input" id="yes">
  <label for="yes">Yes</label>

  <input type="radio" name="my-input" id="no">
  <label for="no">No</label>
</div>

valid 可以选中校验结果正确的元素。比如：

input[type=email]:valid {color:green}

上面的 CSS 可以在输入框中输入正确的email的时候被选中。

<input type="email"/>

当然，还可以选中校验结果不正确的元素。

input[type=email]:invalid  {color: red}

伪元素选择器

伪元素选择器可以在文档中插入不存在的元素，从而达到某种效果。

设置首字母的样式。

p:first-letter {font-size: 5em}

上面的 CSS 可以设置所有 p 标签的首字母的样式。当然也可以设置首行的样式。

p:first-line {font-size: 5em}

在元素前后插入内容

h1:before {content: "hello"}

在 h1 标签之前插入”hello” 字符串。同样，也可以在某个元素后插入内容。

h1:after {content: "hello"}

当然，伪类与伪元素不止上面说的这些，还有一些其他的选择器，如果需要了解更多，可以看一下参考文章里的博客

参考文章

• MDN CSS 参考
• 总结伪类与伪元素
• 《CSS 权威指南》第3版