CSS3 儿子类型序选择器

Ye_xiaoMing

于 2021-08-09 20:19:53 发布

阅读量180

点赞数

本文链接：https://blog.youkuaiyun.com/Leaf_xiaoMing/article/details/119546020

版权

这篇博客详细介绍了CSS中的儿子类型序选择器，包括`:first-of-type`, `:last-of-type`, `:nth-of-type(n)`和`:nth-last-of-type(n)`等，通过示例展示了如何对页面中的特定元素进行样式控制，例如改变指定位置p标签的颜色和字体大小，以及h3标签的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/* 儿子类型序选择器
		  强调同种标签(类型的含义)中排名

		  语法：
		  ：first-of-type 同种标签的老大
		  ：last-of-type 最后一个
		  ：nth-of-type(n) 任意 序号是从1开始
		  ：nth-of-type(an+b) 连续多个
		  ：nth-last-of-type(n) 倒数第n个
		*/
		.box p:first-of-type {
			color: red;
		}
		.box h3:last-of-type {
			color: blue;
		}
		.box p:nth-of-type(3) {
			color: yellow;
		}
		.box p:nth-of-type(2n+1) {
			font-size: 30px;
		}
		.box h3:nth-last-of-type(3) {
			color: orange;
		}
	</style>
</head>
<body>
	<div class="box">
		<h3>我是h3</h3>
		<h3>我是h3</h3>
		<h3>我是h3</h3>
		<h3>我是h3</h3>
		<p>p标签</p>
		<p>p标签</p>
		<p>p标签</p>
		<p>p标签</p>
		<p>p标签</p>
	</div>
</body>
</html>

运行效果：