前端基础-伪元素选择器

最新推荐文章于 2024-04-09 11:29:06 发布

原创最新推荐文章于 2024-04-09 11:29:06 发布 · 571 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#伪元素 #前端

前端专栏收录该内容

69 篇文章

订阅专栏

伪元素选择器

last-child选择器是选择父元素的最后一个元素的所有xx元素，不好用。。
一般来说，想要选择同名元素中的最后一个，就这样使用

<div id="one">
			<div class="a">1</div>
			<div class="a">2</div>
			<div class="a">3</div>
</div>

//这样就可以选中最后一个class类名为a的元素啦！
//需要注意的是，.a元素必须是某元素中的子元素，不能是根元素
.a:last-child{
	color: red;
}

第二种情况

<div id="one">
			<div class="two">
				<div class="a">1</div>
				<div class="a">2</div>
			</div>
			<div class="a">3</div>
		</div>
//此时是2,3都变色，因为他们都是各自父元素的最后一个.a类名的元素

nth-child(n)选择第n个元素

		<div id="one">
			<div class="a">1</div>
			<div class="a">2</div>//红
			<div class="a">3</div>
		</div>
		//选择第二个.a元素
		.a:nth-child(2){
			color: red;
		}

5.nth-child(2n)选择偶数元素

	//只选择偶数的.a元素，奇数的话选择(2n-1)
	.a:nth-child(2n){
		color: red;
	}
	<div id="one">
			<div class="a">1</div>
			<div class="a">2</div>//red
			<div class="a">3</div>
			<div class="a">1</div>//red
			<div class="a">2</div>
			<div class="a">3</div>//red
		</div>
	//需要注意的是，始终是针对一个父元素来说的
	<div id="one">
		<div class="a">1</div>
		<div class="a">2</div>//red
		<div class="a">3</div>
		<div>      //因为父元素不同，所以计数的索引重新开始
			<div class="a">1</div>
			<div class="a">2</div>//red
			<div class="a">3</div>
		</div>
	</div>

nth-child(n+3)表示是从第三个开始之后的所有元素(包括第三个)

.a:nth-child(n+3){
	color: red;
}
<div id="one">
			<div class="a">1</div>
			<div class="a">2</div>
			<div class="a">3</div>//red
			<div class="a">1</div>//red
			<div class="a">2</div>//red
			<div class="a">3</div>//red
		</div>

nth-child(-n+3),=>3,2,1,0,-1…(0之后的都不算),所以指代1开始到3的元素
nth-last-child(2),选择倒数第二个元素
如何选择某个父元素下最后一个xx元素呢？

//通过子选择器指定某个父元素下的子元素，然后通过last-child指定该父元素下的最后一个xx子元素
.two .a:last-child{
				color: red;
			}
			
<div id="one">
			<div class="a">1</div>
			<div class="a">2</div>
			<div class="a">3</div>
			<div class="two">
				<div class="a">1</div>
				<div class="a">2</div>
				<div class="a">3</div>
			</div>
		</div>