## 一、伪类选择器 &emsp;&emsp;伪选择器弥补了常规选择器的不足，能够实现一些特殊情况下的样式，例如在鼠标悬停时或只给字符串中的第一个字符指定样式。与类选择器类似，可以从HTML元素的class属性中查看到，但伪选择器不会出现在HTML文档中（有几个例外,如:lang、::placeholder等）。并且它的关键字大小写不敏感，也就是说empty和EMPTY完全相同。伪选择器分为两种：伪类选择器和伪元素选择器。注意，伪选择器会以一个或两个冒号（:）开头，并且如果要与其它选择器组合使用，那么只能与类型选择器（即元素名）搭配。 &emsp;&emsp;本节要介绍的是伪选择器的第一种：伪类选择器（pseudo-class selector），它用于描述元素的动态特征，再根据元素的特殊状态来选择元素，常用的有结构、链接和表单等伪类。注意，伪类只对它依附的元素起作用，并且多个伪类可拼接在一起。 **1）结构伪类** &emsp;&emsp;CSS3新增了许多与结构相关的伪类，例如:root和:empty。:root会匹配文档的根元素，而在HTML文档中，根元素是html。 &emsp;&emsp;:empty匹配没有子元素的元素，包括文本节点，但不包括注释。下面三个p元素，只有第一个和第三个符合:empty的匹配条件。 ~~~html <p></p> <p> </p> <p><!--注释--></p> ~~~ &emsp;&emsp;:first-child匹配一组兄弟元素中的第一个元素，而:last-child可匹配其中的最后一个。:first-of-type匹配一组兄弟元素中的某种类型的第一个元素，而:last-of-type可匹配其中的最后一个。 &emsp;&emsp;以下面的HTML结构为例，p是三个元素中的第一个，因此可以使用p:first-child；而div并不在第一的位置上，因此div:first-child无效；但是div是该类型的第一个元素，因此可用:first-of-type匹配。 ~~~html <style> p:first-child { background: #FC0; } div:first-child { background: #000; } div:first-of-type { background: #666; } </style> <p>1</p> <div>2</div> <section>3</section> ~~~ &emsp;&emsp;:only-child匹配没有兄弟的元素，即该元素是另一个元素的唯一子元素。例如下面有两个p元素，采用:only-child伪类时，只有第一个符合匹配条件。 ~~~html <style> p:only-child { background: #F60; } </style> <div> <p>1</p> </div> <p>2</p> ~~~ &emsp;&emsp;注意，将:first-child和:last-child两个伪类拼接，其效果相当于:only-child。 &emsp;&emsp;:only-of-type匹配没有相同类型的兄弟元素，如果将:only-of-type依附到上面HTML结构中的p元素上，那么两个p元素都能匹配。 &emsp;&emsp;:nth-child()会找出该元素的所有兄弟元素，然后按照位置匹配。它类似于一个函数，可接收整数和表达式，并将计算结果作为元素所处的位置。下面有3个li元素，:nth-child(1)匹配第一个元素，相当于:first-child；第二个:nth-child()伪类接收一个2n表达式，其中n的取值从0开始，一直到无穷大，2n表示取偶数位置的li元素，下面的li元素只有第二个符合条件。 ~~~html <style> li:nth-child(1) { background: #666; } li:nth-child(2n) { background: #F60; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> ~~~ &emsp;&emsp;:nth-last-child()的功能与:nth-child()类似，只是地从后往前匹配。 &emsp;&emsp;:nth-of-type()的功能与:nth-child()相似，但需要限制元素类型（即匹配相同类型的元素），它可接收的参数与:nth-child()相同。以下面的HTML结构为例，p:nth-of-type(2n)会先过滤出p元素，然后再匹配偶数位置的p元素。虽然第一个p元素在HTML结构中所处的是偶数位置，但是在同类型的兄弟元素中所处的却是奇数位置，因此无法匹配。 ~~~html <style> p:nth-of-type(2n) { background: #FC0; } </style> <section>1</section> <p>2</p> <p>3</p> <div>4</div> ~~~ &emsp;&emsp;与:nth-of-type()对应的是:nth-last-of-type()，需要从后往前匹配。 **2）链接伪类** &emsp;&emsp;在链接元素中，常用的4个伪类有未访问（:link）、已访问（:visited）、激活（:active）和悬停（:hover），分别表示4种状态。它们的声明顺序推荐使用LVHA，通常这4个伪类会使用同一个源声明，4个伪类的特殊性（将在第二章讲解）也相同，如下代码所示，因此影响权重的只有在样式表中所处的位置了。 ~~~css a:link { color: blue; } a:visited { color: red; } a:hover { color: green; } a:active { color: yellow; } ~~~ &emsp;&emsp;当鼠标悬浮在未访问或已访问链接的时候，都会同时存在两种状态，:link与:hover或:visited与:hover。如果:hover声明在:link或:visited之前，那么就会被覆盖掉。当鼠标点中链接的时候，会同时存在两种状态，:active与:hover。如果:active声明在:hover之前，那么会被覆盖掉。因此:hover与:active必须在:link与:visited之后，而:active必须在:hover之后，至于:link与:visited，它们两个的顺序可以互换。将LVHA记成两个单词的组合，love和hate，能更易于记忆。 &emsp;&emsp;还有一种:focus伪类更多地用于表单元素，可在元素聚焦时生效，例如为文本框添加:focus，如下所示。在下图中，右边是获得输入焦点时文本框的样式。 ~~~html <style> input:focus { background: #F60; } </style> <input type="text" /> ~~~  **3）表单伪类** &emsp;&emsp;这种伪类专门服务于表单控件，根据用户与表单控件的交互，来反映其某种状态。 &emsp;&emsp;:enabled和:disabled分别应用于控件的启用和禁用状态，如下代码所示，文本框默认是启用状态，第二个文本框设置了disabled属性，变成禁用状态。 ~~~html <style> input:enabled { background: #FC0; } input:disabled { background: #000; } </style> <input type="text"/> <input type="text" disabled/> ~~~ &emsp;&emsp;:checked应用于单选框或复选框的选中状态。:required和:optional应用于控件的必选和可选状态，即前者可匹配带有required属性的控件，而后者正好相反。 &emsp;&emsp;:valid和:invalid用于验证文本框中的数据是否有效，前者是有效，后者是无效，例如将文本框的格式限制为电子邮件，当格式不正确时，修改文本框的背景，如下所示。 ~~~html <style> input[type=email]:invalid { background: #F60; } </style> <input type="email"/> ~~~ &emsp;&emsp;:read-write和:read-only应用于文本框的读写和只读状态，如下代码所示，文本框默认是读写状态，第二个文本框设置了readonly属性，变成只读状态。 ~~~html <style> input:read-write { background: #FC0; } input:read-only { background: #F60; } </style> <input type="text"/> <input type="text" readonly/> ~~~ &emsp;&emsp;:in-range和:out-of-range应用于数值类型的文本框，如果当前值处于min和max两个属性限定的范围之内，那么可使用:in-range装饰，否则使用:out-of-range。在下面的示例中，当输入0或6时，文本框的背景就会改变。 ~~~html <style> input[type=number]:out-of-range { background: #F60; } </style> <input type="number" min="1" max="5"/> ~~~ **4）其它伪类** &emsp;&emsp;URL的锚点指向的目标元素可以用:target装饰，例如有一个h3元素（如下所示），其id属性的值为title，当URL是http://www.pwstrick.com#title时，就会改变h3元素的字体颜色。 ~~~html <style> h3:target { color: #FC0; } </style> <h3 id="title">:target</h3> ~~~ &emsp;&emsp;:lang()会基于语言来匹配元素，在HTML中，语言可以通过lang属性、meta元素或协议的信息来确定（例如HTTP首部）。下面两个p元素，只有用英语编写的元素才会被加粗。 ~~~html <style> p:lang(en) { font-weight: bold; } </style> <p lang="en">My name is Strick</p> <p lang="fr">My name is Strick</p> ~~~ &emsp;&emsp;:not()是一种反选伪类，它能接收一个简单的选择器，例如类型、属性、通配等，不能接收伪类、伪元素和群组选择器。在下面的示例中，会为非p元素改变字体颜色。 ~~~html <style> :not(p) { color: #FC0; } </style> <span>1</span> <p>2</p> <div>3</div> ~~~ &emsp;&emsp;注意，:not()伪类不能嵌套，但是能串联，如下代码所示，其中:not(p):not(span)表示一种或的关系，即匹配的元素即不能是p，也不能是span。 ~~~css /* 正确 */ :not(p):not(span) { color: #FC0; } /* 错误 */ :not(p, span) { color: #FC0; } ~~~ ## 二、伪元素选择器 &emsp;&emsp;伪元素选择器（pseudo-element selector）用于处理文档内容，可指定某处的内容（即过滤内容）或添加内容。早期的时候，伪元素和伪类都使用单冒号（:）。但最新的CSS3规定伪元素得使用双冒号（::），伪类用单冒号，这样两者的区分能更明显。注意，伪元素只能出现在选择器的最后位置，并且不能同时定义多个伪元素。 **1）过滤内容的伪元素** &emsp;&emsp;::first-letter会匹配块级元素内容的第一行的首字符，下面的p元素包含一段文本，首字母“s”的字体会扩大一倍。 ~~~html <style> p::first-letter { font-size: 200%; } </style> <p>strick</p> ~~~ &emsp;&emsp;当::first-letter依附的元素同时还指定了::before时，它会匹配content属性中的首字符，如下所示，被扩大的不是“s”而是“i”。 ~~~html <style> div::first-letter { font-size: 200%; } div::before { content: "is"; } </style> <div>strick</div> ~~~ &emsp;&emsp;若要匹配块级元素内容的第一行，可以使用::first-line，例如将第一行加粗，如下所示。 ~~~html <style> p::first-line { font-weight: bold; } </style> <p>My name is Strick.I am from China.</p> ~~~ &emsp;&emsp;::first-letter和::first-line对可使用的属性也做了限制，例如字体、背景等属性允许使用。 &emsp;&emsp;其它常用的伪元素还有::placeholder和::selection，前者可自定义表单控件占位文本的样式，后者可装饰选中内容（即被用户高亮的部分）。下面文本框定义了placeholder属性并声明了::placeholder伪元素，占位文本会变成红色。 ~~~html <style> input::placeholder { color: red; } </style> <input type="text" placeholder="请输入"/> ~~~ **2）添加内容的伪元素** &emsp;&emsp;::before可在元素之前插入修饰性的内容，::after可在元素之后插入修饰性的内容，两个伪元素创建出的虚拟元素默认为行内元素。下面的p元素声明了::before和::after，经过拼接后，在页面上显示的文本为“I am Strick”。 ~~~html <style> p::before { content: "I " } p::after { content: " Strick" } </style> <p>am</p> ~~~ &emsp;&emsp;注意，::before 和::after不能应用于替换元素，例如img、input等。 ***** > 原文出处： [博客园-CSS躬行记](https://www.cnblogs.com/strick/category/1667864.html) [知乎专栏-CSS躬行记](https://zhuanlan.zhihu.com/pwcss) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。