CSS3中的伪类选择器之结构伪类选择器

最新推荐文章于 2024-04-16 17:10:31 发布

如梦灬初醒

最新推荐文章于 2024-04-16 17:10:31 发布

阅读量445

点赞数

本文链接：https://blog.csdn.net/TXW6666/article/details/105594555

版权

在CSS3中新增许多选择器其中伪类选择器分为：

结构型伪类选择器、UI元素状态伪类选择器，否定选择器，和伪元素

伪类结构选择器：

:first-child选择某个元素的第一个子元素；

<style>
	 p:first-child  /* 选中body下的第一个p元素*/
	{
		background-color:yellow;
	}
</style>
<body>
	<div>
		<p>被改变样式的</p>
		<p>没有被改变样式</p>
	</div>
</body>

效果：
在这里插入图片描述

<style>
	div p:first-child  /* 选中div下的第一个p元素*/
	{
		background-color:yellow;
	}
</style>

<body>
	<div>
		<p>被改变样式的</p>
		<p>没有被改变样式</p>
	</div>
</body>

效果：
在这里插入图片描述

<style>
	div p:first-child i /* 选中div下的第一个p元素中的每个i元素*/
	{
		background-color:yellow;
	}
</style>

<body>
	<div>
		<p>被<i>改</i>变<i>样</i>式的</p>
		<p>没有被<i>改</i>变<i>样</i>式</p>
	</div>
</body>

效果：
在这里插入图片描述

:last-child选择某个元素的最后一个子元素；

这个选择器基本和:first-child 相同只不过是选择最后一个子元素

	<style>
		div p:last-child i /* 选中div下的最后一个p元素中的每个i元素*/
		{
			background-color:yellow;
		}
	</style>
	
	<body>
		<div>
			<p>没有被<i>改</i>变<i>样</i>式</p>
			<p>被<i>改</i>变<i>样</i>式的</p>
		</div>
	</body>

效果：
在这里插入图片描述

:nth-child(n)选择某个元素的一个或多个特定的子元素，从第一个子元素开始

p:nth-child(1) 选中 所有元素下第一个子元素是 p 标签 所有P标签

n是数字

<style> 
	h1:nth-child(1){/* 选中 第一个元素是的h1标签*/
		background:#ff0000;
	}
	p:nth-child(2){ /* 选中 第二个元素是的P标签*/
		{
		background:#ff0000;
	}
	p:nth-child(4){ /*  选中 第四个元素是的P标签  第四个标签不是p所以没有改变*/
		background:#ff0000;
	}
	p:nth-child(6){ /* 选中第六个元素是的P标签*/
		background:#ff0000;
	}
	p:nth-child(1){ /* 选中 第一个元素是的P标签   div下的第一个元素是p 所以该伪类选中的是div下的第一个P*/
	background:#ffF000;;
	}
</style>

<body>
	<h1> 第一个标签h1</h1>
	<p> 第二个标签p</p>
	<p> 第三个标签P</p>
	<span>第四个标签span</span>
	<div>
		<p>div下第一个P标签</p>
	</div>
	<p> 第六个标签 p</p>
</body>

效果：
在这里插入图片描述

n是关键词

<style> 
	p:nth-child(odd)/*odd表示单数*/
	{
		background:#ff0000;
	}
	p:nth-child(even)/*even表示双数*/
	{
		background:#0000ff;
	}
</style>

<body>
	<h1> 第一个标签h1</h1>  //虽然是单数 但是不是P标签 所以没有样式
	<p> 第二个标签p</p>  //是双数 是P标签 有样式
	<p> 第三个标签P</p> //是单数 是P标签 有样式
	<span>第四个标签span</span> //是双数 不是P标签 没有样式
	<div>
		<p>div下第一个P标签</p> // div下第一个P标签 是单数 是P标签 有样式
	</div>
	<p> 第六个标签 p</p> //是双数 是P标签 有样式
</body>

效果：
在这里插入图片描述

n是公式

(an + b)。描述：表示周期的长度， n 是计数器（从 0 开始），b 是偏移值。

<style> 
	p:nth-child(2n+1) /*从开头开始算所有2的倍数 加+1 */
	{
	background:#ff0000;
	}
</style>

<body>
	<p>第一个p标签</p>
	<p>第二个p标签</p>
	<p>第三个p标签</p>
	<p>第四个p标签</p>
	<p>第五个p标签</p>
	<p>第六个p标签</p>
	<p>第七个p标签</p>
	<p>第八个p标签</p>
	<p>第九个p标签</p>
</body>

效果：
在这里插入图片描述

:nth-last-child(n)选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

和:first-child 使用相同只不过是选择最后一个子元素

<style> 
	p:nth-last-child(4n+1) /*从结尾开始算所有4的倍数 加+1 */
	{
	background:#ff0000;
	}
</style>

<body>
	<p>第一个p标签。</p>
	<p>第二个p标签。</p>
	<p>第三个p标签。</p>
	<p>第四个p标签。</p>
	<p>第五个p标签。</p>
	<p>第六个p标签。</p>
	<p>第七个p标签。</p>
	<p>第八个p标签。</p>
	<p>第九个p标签。</p>
</body>

效果：
在这里插入图片描述

:nth-of-type(n)选择指定的元素，从第一个元素开始

和nth-child(n) 使用基本一样如果把 nth-child(n)看作其父元素所有子元素的集合
那么:nth-of-type(n) 就是其父元素所有指定子级元素的集合
比如：p :nth-of-type(n) 就是其父元素下子级中所有p标签的集合

<style> 
	
	p:nth-of-type(1){ /* 选中从第一个元素开始 第一个P标签*/
		background:#ff0000;
	}
	p:nth-of-type(4){ /*  选中从第一个元素开始 第四个p标签*/
		background:#ff0000;
	}
</style>

<body>
	<h1> 第一个标签h1</h1>
	<p> 第一个p标签</p>
	<p> 第二个p标签</p>
	<span>第四个标签span</span>
	<div>
		<p>div下第一个P标签</p>
	</div>
	<p> 第三个P标签 </p>
	<p> 第四个p标签</p>
</body>

效果：
在这里插入图片描述

:nth-last-of-type(n)选择指定的元素，从元素的最后一个开始计算；

和nth-of-type(n) 使用基本一样选取是从元素的最后一个开始计算；

<style> 
	
	p:nth-last-of-type(2){ /* 选中从结尾开始 第2个P标签*/
		background:#ff0000;
	}
	p:nth-last-of-type(4){ /*  选中从结尾开始 第四个p标签*/
		background:#ff0000;
	}
</style>

<body>
	<h1> 第一个标签h1</h1>
	<p> 第一个p标签</p>
	<p> 第二个p标签</p>
	<span>第四个标签span</span>
	<div>
		<p>div下第一个P标签</p>
	</div>
	<p> 第三个P标签 </p>
	<p> 第四个p标签</p>
</body>

效果：
在这里插入图片描述

: first-of-type选择一个上级元素下的第一个同类子元素；

<style> 
	p:first-of-type /*选取子级p元素中第一个p*/
	{
	background:#ff0000;
	}
</style>

<body>
	<h1>这是标题</h1>
	<p>第一个P标签。</p>
	<p>第二个P标签。</p>
	<p>第三个P标签。</p>
	<p>第四个P标签</p>
	<div>
		<p>div下第一个P标签</p>
	    <p>div下第二个P标签</p>
	</div>
</body>

效果：
在这里插入图片描述

: last-of-type选择一个上级元素的最后一个同类子元素；

<style> 
	p:last-of-type /*选取子级p元素中最后一个p*/
	{
	background:#ff0000;
	}
</style>

<body>
	<h1>这是标题</h1>
	<p>第一个P标签。</p>
	<p>第二个P标签。</p>
	<p>第三个P标签。</p>
	<p>第四个P标签</p>
	<div>
		<p>div下第一个P标签</p>
	    <p>div下第二个P标签</p>
	</div>
</body>

效果：
在这里插入图片描述

:only-child选择的元素是它的父元素下唯一一个子元素；

<style> 
	p:only-child{ /*选取只有一个子级元素且该子级元素是P元素*/
	background:#ff0000;
	}
</style>

<body>
	<p>第一个P标签</p> 
	<div>
		<p>第一个div下第一个P标签</p> 
	</div>
	<div>
		<p>第二个div下第一个P标签</p>
	    <p>第二个div下第二个P标签</p>
	</div>
</body>

效果：
在这里插入图片描述

:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；

<style> 
	p:only-of-type{ /*选取子级元素只有一个P元素*/
		background:#ff0000;
	}
	span:only-of-type{ /*选取子级元素只有一个span元素*/
		background:#fff000;
	}
</style>

<body>
	<div>
		<p>第一个div下唯一一个P标签</p> 
		<span>第一个div下唯一一个span标签</span>
	</div>
	<div>
		<p>第二个div下第一个P标签</p>
	    <p>第二个div下第二个P标签</p>
	</div>
</body>

效果:
在这里插入图片描述

如梦灬初醒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3中的伪类选择器之结构伪类选择器

在CSS3中新增许多选择器其中伪类选择器分为：结构型伪类选择器、UI元素状态伪类选择器，否定选择器，和伪元素伪类结构选择器：:first-child选择某个元素的第一个子元素；<style> p:first-child /* 选中body下的第一个p元素*/ { background-color:yellow; }</style><bod...
复制链接

扫一扫