css3之结构伪类选择器

最新推荐文章于 2022-05-14 10:34:50 发布

小爱同学-Allen

最新推荐文章于 2022-05-14 10:34:50 发布

阅读量559

点赞数 1

分类专栏： css3

本文链接：https://blog.csdn.net/qq_34595425/article/details/99450225

版权

css3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

结构伪类选择器主要有哪些

first-child
last-child
nth-child(2n)
nth-of-type()
first-of-type
last-of-type
only-child
empty

首先我们先把今天要做的效果给大家展示下，今天要做的是在这个案例的基础上添加，话不多说，上代码跟截图
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding:0;
				margin:0;
				text-align: center;
			}
			.demo{
				border: 1px solid #ccc;
				display: inline-block;
				margin-top:100px;
				border-radius: 5px;
			}
			.demo ul{
				display: flex;
				flex-direction: row;
				padding: 10px;
			}
			.demo ul>li{
				list-style: none;
				margin-right:2px;
				padding: 5px;
				border: 1px solid #ddd;
				height:20px;
				width:20px;
			}
			.demo ul li a{
				text-decoration: none;
				background:#f30;
				width:20px;
				display: inline-block;
				border-radius: 10px 0px 10px 0px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<ul>
				<li><a href="">1</a></li>
				<li><a href="">2</a></li>
				<li><a href="">3</a></li>
				<li><a href="">4</a></li>
				<li><a href="">5</a></li>
				<li><a href="">6</a></li>
				<li><a href="">7</a></li>
				<li><a href="">8</a></li>
				<li><a href="">9</a></li>
				<li><a href="">10</a></li>
			</ul>
		</div>
	</body>
</html>

1. first-child选择父元素的第一个子元素

在这里插入图片描述
这个效果只要在上面案例的基础上加上这句代码就可以实现选择父元素的第一个子元素

.demo li:first-child{
	background:black;
}

2. last-child选择父元素的最后一个子元素

在这里插入图片描述
这个效果只要在上面案例的基础上加上这句代码就可以实现选择父元素的最后一个子元素

.demo li:lastt-child{
	background:black;
}

3. nth-child(n)选择父元素下的子元素，n可以是数字，表达式等等

以前我们如果写奇数选中偶数选中，要写两个样式，奇数的class，偶数的class，这边我们可以用如下图的方式来写，更简便（odd,even）

–奇数
在这里插入图片描述

.demo li:nth-child(odd){
	background:black;
}

–偶数

在这里插入图片描述

.demo li:nth-child(even){
	background:black;
}

当n为数字时，如图n为5时，第五个被选中
在这里插入图片描述

.demo li:nth-child(5){
	background:black;
}

当里面为表达式时，n+5前面的n代表全部，5表示从五个开始
在这里插入图片描述

.demo li:nth-child(n+5){
	background:black;
}

当里面为表达式时，2n+3前面的2n代表每隔两个取一个，3表示从三个开始
在这里插入图片描述

.demo li:nth-child(2n+3){
	background:black;
}

4. nth-of-type()，用法跟nth-child差不多，只是这个只是用于父元素指定的某种类型的子元素，以下面这个例子为例

<div class="demo">
	<ul>
		<p>000</p>
		<li><a href="">1</a></li>
		<li><a href="">2</a></li>
		<li><a href="">3</a></li>
		<li><a href="">4</a></li>
		<li><a href="">5</a></li>
		<li><a href="">6</a></li>
		<li><a href="">7</a></li>
		<li><a href="">8</a></li>
		<li><a href="">9</a></li>
		<li><a href="">10</a></li>
	</ul>
</div>
.demo li:nth-of-type(2n){
	background:black;
}

在这里插入图片描述

5. first-of-type，用法跟first-child差不多，只是这个只是用于父元素指定的某种类型的首个子元素，以下面这个例子为例

div代码跟第四的一样

.demo li:first-of-type{
	background:black;
}

在这里插入图片描述

6. last-of-type，用法跟last-child差不多，只是这个只是用于父元素指定的某种类型的最后子元素，以下面这个例子为例

div代码跟第四的一样，这么提供css代码

.demo li:last-of-type{
	background:black;
}

7. only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的li，也就是说，如果div内有多个li，将不匹配。

当有多个li时如下，不会选中

<div class="demo">
	<ul>
		<li><a href="">1</a></li>
		<li><a href="">2</a></li>
		<li><a href="">3</a></li>
		<li><a href="">4</a></li>
		<li><a href="">5</a></li>
		<li><a href="">6</a></li>
		<li><a href="">7</a></li>
		<li><a href="">8</a></li>
		<li><a href="">9</a></li>
		<li><a href="">10</a></li>
	</ul>
</div>
.demo li:only-child{
	background:black;
}

在这里插入图片描述
当只有一个li时，会选中

<div class="demo">
	<ul>
		<li><a href="">1</a></li>
	</ul>
</div>
.demo li:only-child{
	background:black;
}

在这里插入图片描述

8. :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

<div class="demo">
	<ul>
		<li></li>
		<li><a href="">2</a></li>
		<li><a href="">3</a></li>
		<li><a href="">4</a></li>
		<li><a href="">5</a></li>
		<li><a href="">6</a></li>
		<li><a href="">7</a></li>
		<li><a href="">8</a></li>
		<li><a href="">9</a></li>
		<li><a href="">10</a></li>
	</ul>
</div>
.demo li:empty{
	background:black;
}

在这里插入图片描述

为了方便记忆和查询，把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（孤节点）

小爱同学-Allen

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
css3之结构伪类选择器

结构伪类选择器主要有哪些first-childlast-childnth-child(2n)nth-of-type()first-of-typelast-of-typeonly-childempty首先我们先把今天要做的效果给大家展示下，今天要做的是在这个案例的基础上添加，话不多说，上代码跟截图<!DOCTYPE html><html> &lt...
复制链接

扫一扫

专栏目录