CSS结构性伪类选择器

最新推荐文章于 2024-04-16 16:18:11 发布

Stirve unremitting

最新推荐文章于 2024-04-16 16:18:11 发布

阅读量122

点赞数

分类专栏：笔记文章标签： html5 html css css3

本文链接：https://blog.csdn.net/weixin_46421045/article/details/104967059

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.list{
				width: 400px;
				height: 500px;
				background: pink;
				margin: 100px auto;
			}
			li{
				background: skyblue;
				margin-bottom:2px;
				list-style:none;
				height:40px;
			}
			/*第一个元素*/
			li:first-child{
				color:red;
			}
			/*最后一个元素*/
			li:last-child{
				color:red;
			}
			/*选中第2个元素  n则选中所有满足条件的元素*/
			li:nth-child(even){
				color:blue;
				font-size:30px;
			}
			/*只选中只有一个同级元素的li*/
			li:only-child{
				background:purple;
			}
			/*直选中只有一个同级元素的a*/
			a:only-child{
				background: orange;
			}
			/*倒数的第几个元素*/
			ul:nth-last-child(2){
				border:10px solid #000;
			}
			li:nth-last-child(3){
				font-weight:bold;
			}
			
			/*这个类型中的第一个*/
			p:first-of-type{
				color:red;
			}
			/*这一类型中的第一个*/
			span:first-of-type{
				color:red;
			}
			/*第一个元素*/
			/*span:first-child{
				color:yellow;
			}*/
			
			p:last-of-type{
				font-size:30px;
			}
			span:last-of-type{
				font-size:40px;
				color:pink;
			}
			p:nth-of-type(4){
				background: pink;
			}
			p:only-of-type{
				background: orange;
			}
			/*他们家的一群小孩(有很多同级元素)有黄黑白三种肤色,白皮肤只有一个*/
			a:only-of-type{
				background: purple;
				color:yellow;
				font-size:20px;
			}
			/*独生子 没有同级元素*/
			a:only-child{
				background: purple;
				color:yellow;
				font-size:20px;
			}
			span:nth-last-of-type(3){
				color:gold;
				background: yellow;
			}
			/*直接选中根元素 html*/
			:root{background: #ccc;}
			
			/*选中空元素*/
			a:empty{
				display:block;
				width: 400px;
				height: 100px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<!--
			结构伪类选择器:
				:first-child{}	选中第一个元素
				:last-child()	选中最后一个元素
				:nth-child(n){}	n是从0开始的,
					2n		偶数列 even
					2n-1	奇数列 odd
				:only-child{}	选中只有本身一个同级的元素
				:nth-last-child(n){} 倒数第n个元素
		-->
		<!--<ul class="list">
			<li>
				哈哈哈哈1 
				<a href="">111</a>
				<a href="">22</a>
			</li>
			<li>
				哈哈哈哈2 
				<a href="">111</a>
			</li>
			<li>哈哈哈哈3 <a href="">111</a></li>
			<li>哈哈哈哈4 <a href="">111</a></li>
			<li>哈哈哈哈5 <a href="">111</a></li>
			<li></li>
			<li>哈哈哈哈7</li>
			<li>哈哈哈哈8</li>
			<li>哈哈哈哈9</li>
		</ul>
		<ul>
			<li>哈哈哈哈666</li>
		</ul>-->
	
		<!--
			所有小孩中的第一个 first-child{}
				未分类 p1是第一个 
					  span4是第四个
					  
			男孩中的第一个 first-of-type{}
				分类后 p1是第一个
			女孩中的第一个 first-of-type{}
				分类后 span4是第一个
			
			有很多同级元素,但是只有一个a标签 :only-of-type{}
			没有其他同级元素,只有一个a标签 :only-child{}
		-->
		<div class="box">
			<span>嘿嘿嘿嘿4</span>
			<p>哈哈哈哈p1</p>
			<p>哈哈哈哈p2</p>
			<p>哈哈哈哈p3</p>
			<span>嘿嘿嘿嘿5</span>
			<span>嘿嘿嘿嘿6</span>
			<p>哈哈哈哈p7</p>
			<p>哈哈哈哈p8</p>
			<a href="">哈哈哈哈aa</a>
			<p>哈哈哈哈p9</p>
			<p>哈哈哈哈p10</p>
		</div>
		<div class="box1">
			<a href=""></a>
		</div>
	持续更新中...............................
	</body>
</html>

Stirve unremitting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS结构性伪类选择器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .list{ width: 400px; ...
复制链接

扫一扫