万字总结：CSS伪元素和伪类全网最全解析

2. :first-child用于匹配元素的第一个子元素。

3. :last-child用于匹配元素的最后一个子元素。

4. :first-of-type用于匹配属于其父元素的首个特定类型的子元素的每个元素。

5. :last-of-type用于匹配元素的最后一个子元素

6. :nth-child根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数，an+b匹配到的元素示例如下：

◼️ 1n+0，或n，匹配每一个子元素。

◼️ 2n+0，或2n，匹配位置为2、4、6、8…的子元素，该表达式与关键字even等价。

◼️ 2n+1匹配位置为1、3、5、7…的子元素、该表达式与关键字odd等价。

◼️ 3n+4匹配位置为4、7、10、13…的子元素。

如下例，有以下HTML列表：

<ol>
  <li>Alphali>
  <li>Betali>
  <li>Gammali>
  <li>Deltali>
  <li>Epsilonli>
  <li>Zetali>
  <li>Etali>
  <li>Thetali>
  <li>Iotali>
  <li>Kappali>
ol>

CSS:
选择第二个元素，”Beta”会变成橙色：

ol :nth-child(2) {
  color: orange;
}

选择位置序号是2的倍数的元素，”Beta”, “Delta”, “Zeta”, “kappa”会变成橙色:

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

选择位置序号为偶数的元素：

ol :nth-child(even) {
  color: orange;
}

选择从第6个开始，位置序号是2的倍数的元素，”Zeta”, “Theta”, “Kappa”会变成橙色：

ol :nth-child(2n+6) {
  color: orange;
}

7. :nth-last-child与:nth-child相似，不同之处在于它是从最后一个子元素开始计数的。

8. :nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素。

如下例，第二个

元素会变为橙色。

<article>
    <h1>我是标题h1>
    <p>一些文本p>
    <a href=""><img src="images/rwd.png" alt="Mastering RWD">a>
    <p>这里的文本是橙色的p>
article>

p:nth-of-type(2) {
  color: orange;
}

9. :nth-last-of-type与nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的。

10. 当元素是其父元素中唯一一个子元素时，:only-child匹配该元素。

<ul>
  <li>这里的文本是橙色的li>
ul>
<ul>
  <li>一些文本li>
  <li>一些文本li>
ul>

ul :only-child {
  color: orange;
}

11. :only-of-type用于当元素是其父元素中唯一一个特定类型的子元素时，:only-child匹配该元素。

如下例，第一个ul元素只有一个li类型的元素，该li元素的文本会变为橙色。

<ul>
  <li>这里的文本是橙色的li>
  <p>这里不是橙色p>
ul> 
<ul>
  <li>一些文本li>
  <li>一些文本li>
ul>

li:only-of-type {
  color: orange;
}

12. :target是当该页面的URL带有锚名称，指向文档内某个具体的元素时，:target匹配该元素。

如下例，url中的target命中id值为target的article元素，article元素的背景会变为黄色。

URL:
http://example.com/#target

<article id="target">
  <h1><code>:targetcode> pseudo-classh1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!p>
article>

:target {
  background: yellow;
}

🔽 表单相关

1. :checked匹配被选中的input元素，这个input元素包括radio和checkbox。

如下例，当复选框被选中时，与其相邻的元素的背景会变成黄色。

<input type="checkbox"/>
<label>我同意label>

input:checked + label {
  background: yellow;
}

2. :default匹配默认选中的元素，例如：提交按钮总是表单的默认按钮。

如下例，只有提交按钮的背景变成了黄色。

<form action="#">
  <button>重置button>
  <button type="submit">提交button>
form>

:default  {
  background: yellow;
}

3. :disabled匹配禁用的表单元素。

如下例，被禁用input输入框的透明度会变成50%。

<input type="text" disabled/>

:disabled {
  opacity: .5;
}

4. :empty匹配没有子元素的元素。如果元素中含有文本节点、HTML元素或者一个空格，则:empty不能匹配这个元素。

如下例，:empty能匹配的元素会变为黄色。

第一个元素中有文本节点，所以其背景不会变成黄色；

第二个元素中有一个空格，有空格则该元素不为空，所以其背景不会变成黄色；

第三个元素中没有任何内容，所以其背景会变成黄色；

第四个元素中只有一个注释，此时该元素是空的，所以其背景会变成黄色；

<div>这个容器里的背景是橙色的div>
<div> div>
<div>div>
<div>div>

div {
  background: orange;
  height: 30px;
  width: 200px;
}
div:empty {
  background: yellow;
}

5. :enabled用于匹配没有设置disabled属性的表单元素。

6. :in-range匹配在指定区域内元素。

如下例，当数字选择器的数字在5到10是，数字选择器的边框会设为绿色。

<input type="number" min="5" max="10">

input[type=number] {
  border: 5px solid orange;
}
input[type=number]:in-range {
  border: 5px solid green;
}

7. :out-of-range与:in-range相反，它匹配不在指定区域内的元素。

8. indeterminate的英文意思是“不确定的”。当某组中的单选框或复选框还没有选取状态时，:indeterminate匹配该组中所有的单选框或复选框。

如下例，当下面的一组单选框没有一个处于被选中时，与input相邻的label元素的背景会被设为橙色。

<ul>
    <li>
        <input type="radio" name="list" id="option1">
        <label for="option1">Option 1label>
    li>
    <li>
        <input type="radio" name="list" id="option2">
        <label for="option2">Option 2label>
    li>
    <li>
        <input type="radio" name="list" id="option3">
        <label for="option3">Option 3label>
    li>
ul>

:indeterminate + label {
  background: orange;
}

9. :valid匹配条件验证正确的表单元素。

如下例，当email输入框内的值符合email格式时，输入框的边框会被设为绿色。

<input type="email"/>

input[type=email]:valid {
  border: 1px solid green;
}

10. :invalid与:valid相反，匹配条件验证错误的表单元素。

11. :optional用于匹配是具有optional属性的表单元素。当表单元素没有设置为required时，即为optional属性。

如下例，第一个input的背景不会被设为黄色，第二个input的背景会被设为黄色。

<input type="text" required />
<input type="text" />

:optional {
  background: yellow;
}

12. :required与:optional相反匹配设置了required属性的表单元素。

13. :read-only匹配设置了只读属性的元素，表单元素可以通过设置“readonly”属性来定义元素只读。

如下例，input元素的背景会被设为黄色。

<input type="text" value="I am read only" readonly>

put:read-only {
  background-color: yellow;
}

14. :read-write匹配处于编辑状态的元素。input，textarea和设置了contenteditable的HTML元素获取焦点时即处于编辑状态。

如下例，input输入框和副文本框获取焦点时，背景变成黄色。

<input type="text" value="获取焦点时背景变黄"/>
<div class="editable" contenteditable>
   <h1>点击这里可以编辑h1>
   <p>获取焦点时背景变黄p>
div>

:read-write:focus {
  background: yellow;
}

15. :scope(处于试验阶段)匹配处于style作用域下的元素。当style没有设置scope属性时，style内的样式会对整个html起作用。

如下例，第二个section中的元素的文本会变为斜体。

<article>
    <section>
        <h1>很正常的一些文本h1>
        <p>很正常的一些文本p>
    section>
    <section>
        <style scoped>
            :scope {
                font-style: italic;
            }
        style>
        <h1>这里的文本是斜体的h1>
        <p>这里的文本是斜体的p>
    section>
article>
注：目前支持这个伪类的浏览器只有火狐。

🔽 语言相关

1. :dir(处于实验阶段)匹配指定阅读方向的元素，当HTML元素中设置了dir属性时该伪类才能生效。现时支持的阅读方向有两种：ltr（从左往右）和rtl（从右往左）。目前，只有火狐浏览器支持:dir伪类，并在火狐浏览器中使用时需要添加前缀( -moz-dir() )。

如下例，p元素中的阿拉伯语（阿拉伯语是从右往左阅读的）文本会变成橙色。

<article dir="rtl">
<p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.p>
article>

/* prefixed */
article :-moz-dir(rtl) {
  color: orange;
}
/* unprefixed */
article :dir(rtl) {
  color: orange;
}

如下例，p元素中的英语文本会变成蓝色

<article dir="ltr">
  <p>اIf you already know some HTML and CSS and understand the principles of responsive web design, then this book is for you.p>
article>

article :-moz-dir(ltr) {
  color: blue;
}
 
/* unprefixed */
article :dir(ltr) {
  color: blue;
}

2. :lang匹配设置了特定语言的元素，设置特定语言可以通过为了HTML元素设置lang=””属性，设置meta元素的charset=””属性，或者是在http头部上设置语言属性。实际上，lang=””属性不只可以在html标签上设置，也可以在其他的元素上设置。

如下例，分别给不同的语言设置不同的引用样式：

<article lang="en">
  <q>Lorem ipsum dolor sit amet.q>
article>
<article lang="fr">
  <q>Lorem ipsum dolor sit amet.q>
article>
<article lang="de">
  <q>Lorem ipsum dolor sit amet.q>
article>

:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }

🔽 其他伪类

1. :root匹配文档的根元素。一般的html文件的根元素是html元素，而SVG或XML文件的根元素则可能是其他元素。

如下例，将html元素的背景设置为橙色

:root {
  background: orange;
}

2. :fullscreen匹配处于全屏模式下的元素。全屏模式不是通过按F11来打开的全屏模式，而是通过Javascript的Fullscreen API来打开的，不同的浏览器有不同的Fullscreen API。目前，:fullscreen需要添加前缀才能使用。

如下例，当处于全屏模式时，h1元素的背景会变成橙色

<h1 id="element">在全屏模式下，这里的文本的背景会变成橙色.h1>
<button>进入全屏模式!button>

// JAVASCRIPT:
 
var docelem = document.getElementById('element');
var button = document.querySelector('button');
button.onclick = function() {
 
    if (docelem.requestFullscreen) {
        docelem.requestFullscreen();
    }else if (docelem.webkitRequestFullscreen) {
        docelem.webkitRequestFullscreen();
    } else if(docelem.mozRequestFullScreen) {
        docelem.mozRequestFullScreen();
    } else if(docelem.msRequestFullscreen) {
        docelem.msRequestFullscreen();
    }
}

/* CSS: */
 
h1:fullscreen {
    background: orange;
}
h1:-webkit-full-screen {
    background: orange;
}
 
h1:-moz-full-screen {
    background: orange;
}
 
h1:-ms-fullscreen {
    background: orange;
}