CSS 伪类

CSS 伪类是特殊的选择器，用于为元素的特殊状态设置样式，比如鼠标悬停、获取焦点时的高亮等；

CSS 伪类可用于：

当用户将鼠标悬停在按钮上时为其设置背景色
访问和未访问链接的样式不同
当元素获得焦点时为其设置高亮

CSS 伪类语法

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态，当某些外部因素导致元素的状态改变后而呈现不同的外观。

selector:pseudo-class { property: value; }
-------- ------------   --------  -----
   ↑          ↑            ↑        ↑
 选择器       伪类          属性      值

伪类以 : 开头，附加在选择器的后面。

链接的伪类

链接的伪类让链接在不同的状态下有不同的外观，比如未访问过的链式是蓝色，访问过的链接是红色等。

使用伪类为链接的不同状态的定义外观：

/* 未访问过的链接 */
a:link {
  color: #0000ff;
}

/* 访问过的链接 */
a:visited {
  color: #ff0000;
}

/* 鼠标悬停时 */
a:hover {
  color: #00ff00;
}

/* 按下链接时 */
a:active {
  color: #ffff00;
}

!! 注意： a:hover 必须在 a:link 和 a:visited 之后才能生效！ a:active 必须在 a:hover 定义之后才能生效！伪类名称不区分大小写。

`:first-child` 伪类

:first-child 伪类匹配表示在一组兄弟元素中的第一个元素。

选择器匹配任何元素的第一个子元素  元素：

i:first-child {
  color: lime;
}

匹配所有  元素中的第一个  元素:

p i:first-child {
  color: lime;
}

选择器匹配任何元素的第一个子元素  元素中的所有  元素：

p:first-child i {
  color: lime;
}

`:lang` 伪类

:lang 伪类基于元素语言来匹配页面元素。

为带有 lang="no" 的 <q> 元素定义波浪号：

<html>
  <head>
    <style>
      q:lang(no) {
        quotes: "~""~";
      }
    </style>
  </head>
  <body>
    <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
  </body>
</html>

所有 CSS 伪类

选择器	示例	示例说明
`:active`	`a:active`	选择所有激活链接
`:hover`	`a:hover`	选择鼠标悬停的链接
`:link`	`a:link`	选择所有未访问过的链接
`:visited`	`a:visited`	选择所有访问过的元素
`:checked`	`input:checked`	选择所有被选中的 `<input>` 元素
`:disabled`	`input:disabled`	选择所有禁用的 `<input>` 元素
`:enabled`	`input:enabled`	选择所有可用的 `<input>` 元素
`:invalid`	`input:invalid`	选择当前值为不合法值的 `<input>` 元素
`:valid`	`input:valid`	选择当前值为合法值的 `<input>` 元素
`:optional`	`input:optional`	选择不必须的 `<input>` 元素
`:required`	`input:required`	选择必须的 `<input>` 元素
`:in-range`	`input:in-range`	选择带有范围值的 `<input>` 元素
`:out-of-range`	`input:out-of-range`	选择当前值已经超出指定的范围值的 `<input>` 元素
`:read-only`	`input:read-only`	选择只读的 `<input>` 元素
`:read-write`	`input:read-write`	选择非只读的 `<input>` 元素
`:focus`	`input:focus`	选择处于焦点的 `<input>` 元素
`:lang(_language_)`	`p:lang(it)`	选择带有属性 `lang="it"` 的 `<p>` 元素
`:empty`	`p:empty`	选择所有的空的 `<p>` 元素
`:first-child`	`p:first-child`	选择作为任何元素的第一个孩子节点的 `<p>` 元素
`:first-of-type`	`p:first-of-type`	选择作为任何元素的孩子节点，且第一个出现的 `<p>` 元素
`:last-child`	`p:last-child`	选择作为任何元素的最后一个孩子节点的 `<p>` 元素
`:last-of-type`	`p:last-of-type`	选择作为任何元素的孩子节点，且最后出现的 `<p>` 元素
`:nth-child(n)`	`p:nth-child(2)`	选择作为任何元素的第 2 个孩子节点的 `<p>` 元素
`:nth-last-child(n)`	`p:nth-last-child(2)`	选择作为任何元素的倒数第 2 个孩子节点的 `<p>` 元素
`:nth-last-of-type(n)`	`p:nth-last-of-type(2)`	选择作为任何元素的孩子节点，且倒数第 2 个出现的 `<p>` 元素
`:nth-of-type(n)`	`p:nth-of-type(2)`	选择作为任何元素的孩子节点，且第 2 个出现的 `<p>` 元素
`:only-of-type`	`p:only-of-type`	选择作为任何元素的孩子节点的 `<p>` 元素，此 `<p>` 元素的所有兄弟节点都是 `<p>` 元素
`:only-child`	`p:only-child`	选择作为任何元素的唯一孩子节点的 `<p>` 元素
`:root`	`root`	选择文档的根元素
`:not(selector)`	`:not(p)`	选择所有不是 `<p>` 元素的元素
`:target`	`#news:target`	当 url 片段中包含片段 `#news` 时，选择带有 `id="news"` 属性的元素