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

CSS躬行记(2)——伪类和伪元素

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

上一篇:G1垃圾收集器和CMS垃圾收集器 (http://mm.fancymore.com/reading/G1-CMS%E5%9E%83%E5%9C%BE%E7%AE%97%E6%B3%95.html#toc_8)


下一篇:loj2587 「APIO2018」铁人两项