揭秘CSS(第 1 版)
2.6.2 结构伪类选择器
阅读(

概述

CSS选择器

概述

基本选择器

关系选择器

属性选择器

伪元素选择器

伪类选择器

链接伪类选择器

结构伪类选择器

结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。

表 2-6 结构伪类选择器
选择器功能描述版本
E:last-child选择父元素的倒数第一个子元素E,相当于E:nth-last-child(1)3
E:nth-child(n)选择父元素的第n个子元素,n从1开始计算3
E:nth-last-child(n)选择父元素的倒数第n个子元素,n从1开始计算3
E:first-of-type选择父元素下同种标签的第一个元素,相当于E:nth-of-type(1)3
E:last-of-type选择父元素下同种标签的倒数第一个元素,相当于E:nth-last-of-type(1)3
E:nth-of-type(n)与:nth-child(n)作用类似,用作选择使用同种标签的第n个元素3
E:nth-last-of-type与:nth-last-child作用类似,用作选择同种标签的倒数第一个元素3
E:only-child选择父元素下仅有的一个子元素,相当于E:first-child:last-child或E:nth-child(1):nth-last-child(1)3
E:only-of-type选择父元素下使用同种标签的唯一子元素,相当于E:first-of-type:last-of-type或E:nth-of-type(1):nth-last-of-type(1)3
E:empty选择空节点,即没有子元素的元素,而且该元素也不包含任何文本节点3
E:root选择文档的根元素,对于HTML文档,根元素永远HTML3

结构伪类选择器很容易遭到误解,需要特别强调。如,p:first-child表示选择父元素下的第一个子元素 p,而不是选择 p 元素的第一个子元素。

需要注意的是,结构伪类选择器中,子元素的序号是从 1 开始的,也就是说,第一个子元素的序号是 1,而不是 0。换句话说,当参数 n 的计算结果为 0 时,将不选择任何元素。

接下来,简单介绍 :first-child、:last-child、:nth-child、:nth-of-type、:empty 这几个选择器,其他选择器的功能在表格中已经描述清楚,不再赘述。

E:first-child 和 E:last-child

:first-child 和 :last-child分别用于选择元素的子元素中,符合条件的第一个和最后一个子元素。:first-child 伪类在CSS2就已经存在,:last-child 伪类是CSS3新增的伪类。

如,对于下面的 tab 菜单,希望该 tab 菜单的第一个元素的左上角,和最后一个元素的右上角应用圆角。HTML代码如下:

<ul class = "tabMenu">
<li><a href="# ">公司介绍</a></li>
<li><a href="# ">产品中心</a></li>
<li><a href="# ">新闻动态</a></li>
</ul>

在CSS3之前,直接选取 class 为 tab 元素的第一个或最后一个子元素,是不可能的。现在,通过 :first-child 和 :last-child 伪类,就可以轻松实现。CSS代码如下:

.tabMenu li:first-child {
    border-top-left-radius: 5px;
}
.tabMenu li:last-child {
    border-top-right-radius: 5px;
}

上述代码的运行结果如图 2‑19 所示:

first-child和last-child伪类
图2-19 first-child和last-child伪类

E:nth-child(n)

E:nth-child(n) 用于选择某个父元素的一个或多个特定的子元素。n 表示不确定的数字,th 是英语中序数词的后缀。因此,nth-child 就表示第 n 个子元素。该选择器的参数 n 可以是数字、公式或关键字:

1)数字:可以是任何大于 0 的正整数。如,.tab li:nth-child(2),表示选择 class 为 .tab 的父元素下,第 2 个 li 子元素。

2)公式:格式为 (an + b)。其中,a表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。如,:nth-child(n+4) 选取序号大于等于 4 的元素,:nth-child(-n+4) 选取序号小于等于 4 的元素,:nth-child(2n) 选取序号为偶数的元素,:nth-child(2n+1) 选取序号为奇数的元素,:nth-child(3n) 选取序号为3、6、9…的子元素(即“隔二选一”),:nth-child(3n+1) 选取序号为1、4、7、10…的子元素,等等。

3)关键字:只有odd 和 even 两个关键字。odd表示选取序号为奇数的元素,效果等同于 :nth-child(2n-1) 和 :nth-child(2n+1);even表示选取序号为偶数的元素,效果等同于 :nth-child(2n)。

E:nth-of-type(n)

:nth-of-type(n) 与 :nth-child(n) 的作用和使用方法完全相同,唯一不同的是,它用来选择某个父元素下,指定类型的一个或多个特定的子元素。

E:empty

选择空节点,即不包含任何子元素的元素,也就是内容为空白的元素。因为文本节点本身也被看作子元素,所以,包含文本节点的元素就不是空元素,哪怕是一个空格。如:

<div>
	<p>我包含文本节点,我不是空元素</p>
	<p></p>
</div>

对上述HTML代码调用样式如下:

p:empty {
	height: 25px; 
	background: #eee;
	border: 1px solid #f90;
}

上述HTML代码中,由于最后一个 p 元素是空节点,则会被 p:empty 选择器选中。于是,它就会表现为一个高度为 25px,背景色为灰色,带有1px 的橙色边框的矩形框。运行结果如图 2‑20 所示:

E:empty运行结果
图2-20 E:empty运行结果

:nth-child 与 :nth-of-type 的区别:

:nth-child 和 :nth-of-type 都能选择子元素,它们到底有什么区别呢?

区别其实也很简单,E:nth-child(n) 是把所有子元素作为选择对象,选择其中的第n个子元素,且这个子元素的类型必须是 E,如果不是,则选择失败。而 E:nth-of-type(n) 则先把类型为E的所有子元素选择出来,从1开始编号,然后把这些子元素作为选择对象,选择其中的第n个。假如有以下HTML代码片段: 

<div> 
<ul class="demo"> 
<p>zero</p> 
<li>one</li> 
<li>two</li> 
</ul> 
</div> 

上述代码中,.demo li:nth-child(2)是从 .demo 的所有子元素中找第二个子元素,且第二个子元素的类型必须是 li,选择结果为<li>one</li>节点;.demo li:nth-of-type(2) 先把 .demo 的所有类型为 li 的子元素找出来,然后选择其中的第 2 个,选择结果为 <li>two</li> 节点。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验