CSS3基础关于CSS结构性伪类选择器的用法实例

关于CSS结构性伪类选择器的用法实例

我们知道在CSS中可以使用类选择器(class)把相同的元素定义成不同的样式,同一个div可以因为class的不同而定义不同的样式。类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名,比如【a:hover】选择器。 伪元素选择器是针对于CSS中已经定义好的伪元素使用的选择器,比如【li:before】选择器。本文我们来了解一些CSS里的结构性伪类选择器:

1. 根选择器【:root】,匹配元素所在文档的根元素,在HTML文档中,根元素始终是<html>,例如:

:root {background:#fafafa;}
html  {background:#fafafa;}

以上两个定义的效果是一样的。

2. 否定选择器【:not】,选择除某个元素之外的所有元素,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
a {font-size:25px;}
a:not([target="_self"]) {color:red;}
</style>
</head>
<body>
<a title="loveshe" href="#">Google</a>
<a title="she is mine" href="#" target="_self">Yohoo</a>
<a title="iphone7s" target="_blank" href="#">Bing</a>
<a title="boys and girls" href="#">Facebook</a>
</body>
</html>

浏览这个网页,我们发现除了含有【target="_self"】属性的其他几个链接均显示为红色。

not.png

3. 空选择器【:empty】,表示没有内容的选择器,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
p {width:300px;height:50px;background:#f6f6f6;}
p:empty {width:300px;height:20px;background:#f6f6f6;}
</style>
</head>
<body>
<p>New Zealand</p>
<p> </p>
<p></p>
</body>
</html>

浏览这个网页,我们发现第三个空段落显示了不同的高度,第二个段落不是空选择器,因为包含了一个空格。

4. 目标选择器【:target】,用来匹配网页URL的某个标志符的目标元素,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
body {font-size:20px;}
p {width:300px;height:50px;background:#f6f6f6;}
a {margin:10px;color:blue;}
.none {display:none;text-align:center;}
:target {color:red;display:block}
.close {float:right;}
.ask {float:left;}
</style>
</head>
<body>
<p>
<a href="#" class="close">关闭</a>
<a href="#key" class="ask">美国有多少个州?</a>
</p>
<p id="key" class="none">50个</p>
</body>
</html>

运行这个网页,我们点击带有目标的链接后,原本隐藏的段落被显示出来,点击其他链接则恢复。

target.png

5. 首尾子元素选择器,【:first-child】用于选择属于父元素的第一个子元素,【:last-child】用于选择属于父元素的最后一个子元素,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
body {font-size:20px;}
li:first-child {color:red;}
li:last-child {color:blue;}
</style>
</head>
<body>
<ul>
<li>射雕英雄传</li>
<li>笑傲江湖</li>
<li>天龙八部</li>
<li>倚天屠龙记</li>
</ul>
</body>
</html>

浏览这个网页,我们看到首个列表项和最后一个列表项的文字改变了颜色。

首尾元素选择器.png

6. nth-child(n)和nth-last-child(n)可以按正数和倒数的顺序选择属于父元素的一个或多个特定的子元素,比如【:nth-child(3)】表示选择第3个子元素,【:nth-last-child(6)】表示倒数第6个子元素。

这里的n除了定义具体数值外,还可以定义为odd和even,表示奇数和偶数。

此外还可以定义为数学表达式,比如我们常见的2n+1则表示所有的奇数,而4n表示的是第4个、第8个、第12个等等,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
body {font-size:20px;}
li:nth-child(2n+1) {color:red;}
li:nth-child(even) {color:blue;}
</style>
</head>
<body>
<ul>
<li>射雕英雄传</li>
<li>笑傲江湖</li>
<li>天龙八部</li>
<li>倚天屠龙记</li>
<li>雪山飞狐</li>
<li>白马啸西风</li>
<li>书剑恩仇录</li>
<li>碧血剑</li>
</ul>
</body>
</html>

这个列表的所有奇数行文字显示为红色,偶数行显示为蓝色。

nth-child.png

7. 指定类型选择器,【:first-of-type】选择器类似【:first-child】选择器,它用来定位一个父元素下的某个类型的第一个子元素。同样的【:last-of-type】选择器是选择父元素下的某个类型的最后一个子元素。

【:nth-of-type(n)】选择器和【:nth-child(n)】选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。【:nth-last-of-type(n)】选择器是从最后一个子元素开始倒数选择。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
body {font-size:16px;}
li:first-of-type {color:red;}
</style>
</head>
<body>
<div id="text">
<p>用阳光乐观的心态去面对生活和工作,它们一样也会回报给你阳光</p>
<p>笑容可以给任何人,但你的心,只须给一个人就好</p>
<li>生活里多少感动的瞬间,在脑海里变成了永恒</li>
<li>时间在变,人也在变。有些事,不管我们如何努力,回不去就是回不去了</li>
<li>有时候,一个人想要的只是一只可握的手和一颗理解的心</li>
<p>无论天大地大,在我心中没有什么比你更重要</p>
</div>
</body>
</html>

浏览这个网页,我们发现第一个列表项文字显示为红色,但它并不是父元素的第一个子元素,所以这种情况下如果我们用【:first-child】选择器是没有作用的,【:first-child】只用于属于父元素的第一个子元素。

type选择器.png

同样的,【:last-of-type】和【:nth-last-of-type(n)】选择器我们就不用多说,大家也明白它们的含义了。

8. 唯一子元素选择器,【:only-child】选择器匹配属于其父元素的唯一子元素的每个元素,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
body {font-size:16px;}
p:only-child {color:red;}
</style>
</head>
<body>
<p>笑容可以给任何人,但你的心,只须给一个人就好</p>
<div id="text">
<p>用阳光乐观的心态去面对生活和工作,它们一样也会回报给你阳光</p>
</div>
<div class="cs">
<li>生活里多少感动的瞬间,在脑海里变成了永恒</li>
<li>时间在变,人也在变。有些事,不管我们如何努力,回不去就是回不去了</li>
<li>有时候,一个人想要的只是一只可握的手和一颗理解的心</li>
<p>无论天大地大,在我心中没有什么比你更重要</p>
</div>
</body>
</html>

我们看到这个网页有多个p标签,但第二个p标签属于某个div唯一的子元素,因此唯一子元素选择器对它有效。

唯一子元素选择器.png

类似的,【:only-of-type】表示一个元素有很多个子元素,而其中只有一种类型的子元素是唯一的,使用【:only-of-type】选择器就可以选中这个元素中的唯一这个类型的子元素,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
body {font-size:16px;}
p:only-of-type {color:red;}
</style>
</head>
<body>
<div class="cs">
<li>生活里多少感动的瞬间,在脑海里变成了永恒</li>
<li>时间在变,人也在变。有些事,不管我们如何努力,回不去就是回不去了</li>
<li>有时候,一个人想要的只是一只可握的手和一颗理解的心</li>
<p>无论天大地大,在我心中没有什么比你更重要</p>
<li>生活里多少感动的瞬间,在脑海里变成了永恒</li>
<li>时间在变,人也在变。有些事,不管我们如何努力,回不去就是回不去了</li>
<li>有时候,一个人想要的只是一只可握的手和一颗理解的心</li>
</div>
</body>
</html>

我们看到这个div有多个子元素,但中间的段落标签是唯一的,所以它显示为红色,如果再多加一个段落标签则定义就无效了。

唯一子元素选择器2.png

以上这些选择器被成为结构性伪类选择器,它们与网页本身的结构有关联,灵活使用这些选择器可以实现很多特殊的效果,大家可以试试看。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/34.html