CSS躬行记（2）——伪类和伪元素

一、伪类选择器

　　伪选择器弥补了常规选择器的不足，能够实现一些特殊情况下的样式，例如在鼠标悬停时或只给字符串中的第一个字符指定样式。与类选择器类似，可以从HTML元素的class属性中查看到，但伪选择器不会出现在HTML文档中（有几个例外,如:lang、::placeholder等）。并且它的关键字大小写不敏感，也就是说empty和EMPTY完全相同。伪选择器分为两种：伪类选择器和伪元素选择器。注意，伪选择器会以一个或两个冒号（:）开头，并且如果要与其它选择器组合使用，那么只能与类型选择器（即元素名）搭配。

　　本节要介绍的是伪选择器的第一种：伪类选择器（pseudo-class selector），它用于描述元素的动态特征，再根据元素的特殊状态来选择元素，常用的有结构、链接和表单等伪类。注意，伪类只对它依附的元素起作用，并且多个伪类可拼接在一起。

1）结构伪类

　　CSS3新增了许多与结构相关的伪类，例如:root和:empty。:root会匹配文档的根元素，而在HTML文档中，根元素是html。

　　:empty匹配没有子元素的元素，包括文本节点，但不包括注释。下面三个p元素，只有第一个和第三个符合:empty的匹配条件。

<p></p>
<p>
</p>
<p><!--注释--></p>

　　:first-child匹配一组兄弟元素中的第一个元素，而:last-child可匹配其中的最后一个。:first-of-type匹配一组兄弟元素中的某种类型的第一个元素，而:last-of-type可匹配其中的最后一个。

　　以下面的HTML结构为例，p是三个元素中的第一个，因此可以使用p:first-child；而div并不在第一的位置上，因此div:first-child无效；但是div是该类型的第一个元素，因此可用:first-of-type匹配。

<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>

　　:only-child匹配没有兄弟的元素，即该元素是另一个元素的唯一子元素。例如下面有两个p元素，采用:only-child伪类时，只有第一个符合匹配条件。

<style>
  p:only-child {
    background: #F60;
  }
</style>
<div>
  <p>1</p>
</div>
<p>2</p>

　　注意，将:first-child和:last-child两个伪类拼接，其效果相当于:only-child。

　　:only-of-type匹配没有相同类型的兄弟元素，如果将:only-of-type依附到上面HTML结构中的p元素上，那么两个p元素都能匹配。

　　:nth-child()会找出该元素的所有兄弟元素，然后按照位置匹配。它类似于一个函数，可接收整数和表达式，并将计算结果作为元素所处的位置。下面有3个li元素，:nth-child(1)匹配第一个元素，相当于:first-child；第二个:nth-child()伪类接收一个2n表达式，其中n的取值从0开始，一直到无穷大，2n表示取偶数位置的li元素，下面的li元素只有第二个符合条件。

<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>

　　:nth-last-child()的功能与:nth-child()类似，只是地从后往前匹配。

　　:nth-of-type()的功能与:nth-child()相似，但需要限制元素类型（即匹配相同类型的元素），它可接收的参数与:nth-child()相同。以下面的HTML结构为例，p:nth-of-type(2n)会先过滤出p元素，然后再匹配偶数位置的p元素。虽然第一个p元素在HTML结构中所处的是偶数位置，但是在同类型的兄弟元素中所处的却是奇数位置，因此无法匹配。

<style>
  p:nth-of-type(2n) {
    background: #FC0;
  }
</style>
<section>1</section>
<p>2</p>
<p>3</p>
<div>4</div>

　　与:nth-of-type()对应的是:nth-last-of-type()，需要从后往前匹配。

2）链接伪类

　　在链接元素中，常用的4个伪类有未访问（:link）、已访问（:visited）、激活（:active）和悬停（:hover），分别表示4种状态。它们的声明顺序推荐使用LVHA，通常这4个伪类会使用同一个源声明，4个伪类的特殊性（将在第二章讲解）也相同，如下代码所示，因此影响权重的只有在样式表中所处的位置了。

a:link {
  color: blue;
}
a:visited {
  color: red;
}
a:hover {
  color: green;
}
a:active {
  color: yellow;
}

　　当鼠标悬浮在未访问或已访问链接的时候，都会同时存在两种状态，:link与:hover或:visited与:hover。如果:hover声明在:link或:visited之前，那么就会被覆盖掉。当鼠标点中链接的时候，会同时存在两种状态，:active与:hover。如果:active声明在:hover之前，那么会被覆盖掉。因此:hover与:active必须在:link与:visited之后，而:active必须在:hover之后，至于:link与:visited，它们两个的顺序可以互换。将LVHA记成两个单词的组合，love和hate，能更易于记忆。

　　还有一种:focus伪类更多地用于表单元素，可在元素聚焦时生效，例如为文本框添加:focus，如下所示。在下图中，右边是获得输入焦点时文本框的样式。

<style>
  input:focus {
    background: #F60;
  }
</style>
<input type="text" />

3）表单伪类

　　这种伪类专门服务于表单控件，根据用户与表单控件的交互，来反映其某种状态。

　　:enabled和:disabled分别应用于控件的启用和禁用状态，如下代码所示，文本框默认是启用状态，第二个文本框设置了disabled属性，变成禁用状态。

<style>
  input:enabled {
    background: #FC0;
  }
  input:disabled {
    background: #000;
  }
</style>
<input type="text"/>
<input type="text" disabled/>

　　:checked应用于单选框或复选框的选中状态。:required和:optional应用于控件的必选和可选状态，即前者可匹配带有required属性的控件，而后者正好相反。

　　:valid和:invalid用于验证文本框中的数据是否有效，前者是有效，后者是无效，例如将文本框的格式限制为电子邮件，当格式不正确时，修改文本框的背景，如下所示。

<style>
  input[type=email]:invalid {
    background: #F60;
  }
</style>
<input type="email"/>

　　:read-write和:read-only应用于文本框的读写和只读状态，如下代码所示，文本框默认是读写状态，第二个文本框设置了readonly属性，变成只读状态。

<style>
  input:read-write {
    background: #FC0;
  }
  input:read-only {
    background: #F60;
  }
</style>
<input type="text"/>
<input type="text" readonly/>

　　:in-range和:out-of-range应用于数值类型的文本框，如果当前值处于min和max两个属性限定的范围之内，那么可使用:in-range装饰，否则使用:out-of-range。在下面的示例中，当输入0或6时，文本框的背景就会改变。

<style>
  input[type=number]:out-of-range {
    background: #F60;
  }
</style>
<input type="number" min="1" max="5"/>

4）其它伪类

　　URL的锚点指向的目标元素可以用:target装饰，例如有一个h3元素（如下所示），其id属性的值为title，当URL是http://www.pwstrick.com#title时，就会改变h3元素的字体颜色。

<style>
  h3:target {
    color: #FC0;
  }
</style>
<h3 id="title">:target</h3>

　　:lang()会基于语言来匹配元素，在HTML中，语言可以通过lang属性、meta元素或协议的信息来确定（例如HTTP首部）。下面两个p元素，只有用英语编写的元素才会被加粗。

<style>
  p:lang(en) {
    font-weight: bold;
  }
</style>
<p lang="en">My name is Strick</p>
<p lang="fr">My name is Strick</p>

　　:not()是一种反选伪类，它能接收一个简单的选择器，例如类型、属性、通配等，不能接收伪类、伪元素和群组选择器。在下面的示例中，会为非p元素改变字体颜色。

<style>
  :not(p) {
    color: #FC0;
  }
</style>
<span>1</span>
<p>2</p>
<div>3</div>

　　注意，:not()伪类不能嵌套，但是能串联，如下代码所示，其中:not(p):not(span)表示一种或的关系，即匹配的元素即不能是p，也不能是span。

/* 正确 */
:not(p):not(span) {
  color: #FC0;
}
/* 错误 */
:not(p, span) {
  color: #FC0;
}

二、伪元素选择器

　　伪元素选择器（pseudo-element selector）用于处理文档内容，可指定某处的内容（即过滤内容）或添加内容。早期的时候，伪元素和伪类都使用单冒号（:）。但最新的CSS3规定伪元素得使用双冒号（::），伪类用单冒号，这样两者的区分能更明显。注意，伪元素只能出现在选择器的最后位置，并且不能同时定义多个伪元素。

1）过滤内容的伪元素

　　::first-letter会匹配块级元素内容的第一行的首字符，下面的p元素包含一段文本，首字母“s”的字体会扩大一倍。

<style>
  p::first-letter {
    font-size: 200%;
  }
</style>
<p>strick</p>

　　当::first-letter依附的元素同时还指定了::before时，它会匹配content属性中的首字符，如下所示，被扩大的不是“s”而是“i”。

<style>
  div::first-letter {
    font-size: 200%;
  }
  div::before {
    content: "is";
  }
</style>
<div>strick</div>

　　若要匹配块级元素内容的第一行，可以使用::first-line，例如将第一行加粗，如下所示。

<style>
  p::first-line {
    font-weight: bold;
  }
</style>
<p>My name is Strick.I am from China.</p>

　　::first-letter和::first-line对可使用的属性也做了限制，例如字体、背景等属性允许使用。

　　其它常用的伪元素还有::placeholder和::selection，前者可自定义表单控件占位文本的样式，后者可装饰选中内容（即被用户高亮的部分）。下面文本框定义了placeholder属性并声明了::placeholder伪元素，占位文本会变成红色。

<style>
  input::placeholder {
    color: red;
  }
</style>
<input type="text" placeholder="请输入"/>

2）添加内容的伪元素

　　::before可在元素之前插入修饰性的内容，::after可在元素之后插入修饰性的内容，两个伪元素创建出的虚拟元素默认为行内元素。下面的p元素声明了::before和::after，经过拼接后，在页面上显示的文本为“I am Strick”。

<style>
  p::before {
    content: "I "
  }
  p::after {
    content: " Strick"
  }
</style>
<p>am</p>

　　注意，::before 和::after不能应用于替换元素，例如img、input等。