使用CSS结构伪类选择器-层次

最新推荐文章于 2024-03-08 17:51:21 发布

一杯崽！

最新推荐文章于 2024-03-08 17:51:21 发布

阅读量759

点赞数 3

文章标签： css html sass

本文链接：https://blog.csdn.net/m0_55068275/article/details/121898353

版权

本文详细介绍了CSS3中的结构伪类选择器如:first-child, :last-child, :nth-last-of-type和层次选择器，包括后代选择器、子选择器及相邻兄弟和通用兄弟的选择方式，并通过实例演示了它们在网页布局中的应用。

摘要由CSDN通过智能技术生成

1.结构伪类

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>使用CSS3结构伪类选择器</title>
	<style type="text/css">	
	/*第一个孩子   注意：冒号前面的元素存在才能选中，如果是不存在的元素，选中的是星空*/
	body>p:first-child{background: red;}
	
	/* 最后一个孩子 注意：冒号前的元素必须是最后一个元素并且对应于标签*/
	body>p:last-child{background: #DEB887;}
	
	ul>li:last-of-type{background: #003580;}
	
	/*具体的第几个*/
	/*选中body子元素中的第二个p标签*/
	
	body>p:nth-last-of-type(4){
		background: #FFEBCD;
	}
	</style>
</head>
<body>
<!--演示的时候可以先把h2注释掉，等讲解E F:nth-child(n)和E F:nth-of-type(n)时候在打开-->
	<!--<h2>结构伪类选择器</h2>-->
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>
	<ul>
		<li>li1</li>
		<li>li2</li>
		<li>li3</li>
	</ul>
	<p>p4</p>
</body>
</html>

2.层次选择器

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>使用CSS3层次选择器</title>
	<style type="text/css">
		
		/*后代选择器*/
		body p{
			background: red;
		}
		
		/*子选择*/
		body>p{
			background: #0000FF;
		}
		
		/*相邻兄弟 	注意：如果相邻的元素不是选择的元素，那么没有选择*/
		.active+p{background: #DEB887;}
		
		/*通用兄弟*/
		.active~p{background: #003580;}
		
	</style>
</head>
<body>
	<p  class="active">1</p><!-- 为了说明相邻兄弟选择器，在此处添加一个类名active -->
	<p>2</p>
	<p>3</p>
	<ul>
		<li>
			<p>4</p>
		</li>
		<li>
			<p>5</p>
		</li>
		<li>
			<p>6</p>
		</li>
	</ul>

</body>
</html>