CSS3 儿子序选择器

最新推荐文章于 2023-04-29 19:23:18 发布

Ye_xiaoMing

最新推荐文章于 2023-04-29 19:23:18 发布

阅读量504

点赞数

本文链接：https://blog.csdn.net/Leaf_xiaoMing/article/details/119546148

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/* 儿子序选择器
		  通过儿子在父级元素排名进行选中，只关心儿子在父盒子中是老几，不关心儿子的标签类型。

		  语法：
		  元素:first-child
		  (选中父级元素中的第一个儿子)

		  元素:last-child
		  (最后一个儿子)

		  元素:nth-child(n)
		  (任意 n是从1开始)

		  元素:nth-child(an+b)
		  (连续多个)

		  元素:nth-last-child(n)
		  (倒数第几个儿子 n是从倒数第一开始)
		*/

		/*:first-child 选中老大*/
		.box h3:first-child {
			/*表示h3是box中的老大*/
			/*h3必须是box的第一个标签，否则使用:first-child没有用*/
			color: red;
		}

		/*:last-child*/
		.box p:last-child {
			/*p必须是box中最后一个元素，否则无效*/
			color: blue;
		}

		/*nth-child(n)*/
		.box h3:nth-child(4) {
			color: yellow;
		}

		/*:nth-child(an+b)*/
		.box p:nth-child(2n) {
			font-size: 30px;
		}

		/*:nth-last-child(n)*/
		.box p:nth-last-child(3) {
			color: purple;
		}
	</style>
</head>
&l

最低0.47元/天解锁文章

Ye_xiaoMing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 儿子序选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 儿子序选择器通过儿子在父级元素排名进行选中，只关心儿子在父盒子中是老几，不关心儿子的标签类型。语法：元素:first-child (选中父级元素中的.
复制链接

扫一扫