结构伪类元素 

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 选中p元素的父亲的第一个儿子 */
			p:first-child {
				color: red;
			}
		</style>


	</head>
	<body>
		<p>1111111111</p>
		<div>
			<p>2222222222222</p>
		</div>

		<p>33333333</p>
		<p>4444444</p>
		<p>5555555</p>
	</body>
</html>```
第二种情况
```<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 选中p元素的父亲的第3个儿子,从1开始算 */
			p:nth-child(3) {
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>1111111111</p>
			<div>
				<p>2222222222222</p>
				<p>666666666666</p>
			</div>
			<p>33333333</p>
			<p>4444444</p>
			<p>5555555</p>
		</div>
	</body>
</html>```
..............................................

```<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 选中p元素的父亲的前3个元素 */
			div>p:nth-child(-n+3) {
				color: red;
			}
		</style>
	</head>
	<body>
		<div>

			<p>11111111111111</p>
			<p>22222222222222</p>
			<p>33333333333333</p>
			<p>44444444444444</p>
			<p>55555555555555</p>
			<p>66666666666666</p>
		</div>
	</body>
</html>```
posted @ 2025-07-19 08:49  神仙不在  阅读(9)  评论(0)    收藏  举报