CSS3选择器--结构性伪类选择器

在学习结构性伪类选择器之前，先了解2个概念：CSS中的伪类选择器和伪元素：

1、伪类选择器：CSS中已经定义好的选择器,不能随便取名

常用的伪类选择器是使用在a元素上的几种，如a:link|a:visited|a:hover|a:active

2、伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器

CSS中有如下四种伪元素选择器：

1）first-line:为某个元素的第一行文字使用样式；

2）first-letter:为某个元素中的文字的首字母或第一个字使用样式；

3）before:在某个元素之前插入一些内容；

4）after: 在某个元素之后插入一些内容；

使用方法：选择器：伪元素{样式}

在后续的文章中会详细介绍伪类选择器的具体使用方法，本文主要是要介绍nth-child、nth-last-child、nth-of-type、nth-last-of-type、first-child 、last-child 、first-of-type 、last-of-type、only-child以及only-of-type。结构性伪类选择器的公共特征是允许开发者根据文档结构来指定元素的样式。接下来开始进入正题。

1、nth-child和nth-last-child

1）E:nth-child(n) 选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。比如：

p:nth-child(n){background:red} 表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}/*其中n是从0开始计算*/

经验与技巧:当“E:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

例子（Html代码）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p,h1{height:30px;width:300px;border:1px solid #00A2E9;}p:nth-child(2n){background-color: #64b0ff;}</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</body>
</html>

效果：

但是某些情况下会有问题，比如我将上面的例子改写成下面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p,h1{height:30px;width:300px;border:1px solid #00A2E9;}p:nth-child(2n){background-color: #64b0ff;}</style>
</head>
<body><p>p1</p><h1>h1</h1>/*增加了h1标签*/<p>p2</p><h1>h2</h1>/*增加了h1标签*/<p>p3</p><p>p4</p><p>p5</p><p>p6</p>
</body>
</html>

效果就变成如下图所示，发现p2的样式并没有应用。因为nth-child选择器在计算子元素是第n个元素，是连同所有父元素中所有子元素一起计算的，这样的话，p2其实是第三个元素，但是h1和h2由于没有被选中，所以颜色不变。

这个问题就需要用E:nth-of-type(n) 来解决，后面会详细介绍。

2）E:nth-last-child(n) 选择器和前面的“E:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“E:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。这里的使用就不举例说明了。

2、E:nth-of-type(n) 和E:nth-last-of-type(n)

1）“E:nth-of-type(n)”选择器和“E:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“E:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“E:nth-of-type(n)”选择器中的“n”和“E:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

刚才的那个例子就可以直接利用这个选择器实现，它可以只选中p元素。

p:nth-of-type(2n){background-color: #64b0ff;
}

效果图如下，完美的实现了^^。

2）E:nth-last-of-type(n)d(n) 选择器和前面的“E:nth-of-type(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“E:nth-of-type(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。这里的使用就不举例说明了。

3、E:first-child和E:last-child

1）“E:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

案例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p,h1{height:30px;width:300px;border:1px solid #00A2E9;}p:first-child{background-color: #64b0ff;}</style>
</head>
<body><p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p><p>p6</p>
</body>
</html>

效果图：

2）“E:last-child”选择器与“E:first-child”选择器作用类似，不同的是“E:last-child”选择器选择的是元素的最后一个子元素。

其他几种结构性伪类选择器这里就不做详细介绍了。这里主要是对比三种选择器。

总结：

为了方便记忆和查询，把CSS的结构伪类选择器归为四类：
1）通用子元素过滤器：E:nth-child(n)（顺序过滤）和E:nth-last-child(n)(逆序过滤)
2）通用子类型元素过滤器：E:nth-of-type（顺序过滤）和E:nth-last-of-type(n)(逆序过滤)
3）特定位置的子元素：E:first-child,E:last-child,E:first-of-type,E:last-of-type
4）特定状态的元素：E:root（根节点）、E:only-child（独子元素）、E:only-of-type（独子类型元素）和E:empty（孤节点）

CSS3选择器--结构性伪类选择器相关推荐

html伪类选择器代码,CSS3中结构性伪类选择器—:first-of-type实现名言标签（代码实例）...
本文目标: 1.掌握CSS中结构性伪类选择器-nth-child的用法问题: 1.实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器-first-of-type 附加说明: 1.整体宽为 ...
css3学习之 css选择器(结构性伪类选择器)
同上篇:先说明下本机浏览器吧:opera 10 firefox 4.0 chrome 由于是公司机器xp的..所以ie版本为 ie8 另外有一个ietest 所谓伪元素选择器,是指并不是针对真正的元 ...
CSS3学习笔记1：结构性伪类选择器
第2节.结构性伪类选择器在学习结构性伪类选择器之前,先了解2个概念:sCSS中的伪类选择器&伪元素伪类选择器:CSS中已经定义好的选择器,不能随便取名常用的伪类选择器是使用在a元素上的几 ...
CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
CSS3新增的伪类选择器
伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器其他伪类选择器 1.结构性 ...
CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)...
使用CSS3 选择器--笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
第一章：第三课选择器-状态伪类选择器[四]
前三节我们学习了form元素的状态伪类选择器,今天我们再来学习一下复选框和单选框的选择器,以下选择器Opera支持最好! :default选择器.:checked选择器和:indeterminate选 ...
html中结构伪类选择器,结构伪类选择器
属性选择器元素的属性,我们都知道是什么.例如下面代码中type和value就是input元素的属性.属性选择器,顾名思义,就是通过属性来选择元素的一种方式. 属性选择器说明 E[attr^=&qu ...

CSS3选择器--结构性伪类选择器

CSS3选择器--结构性伪类选择器相关推荐

最新文章

热门文章