1. 首页
  2. CSS 菜鸟教程
  3. CSS - 伪类 :nth-of-type()

CSS - 伪类 :nth-of-type()

CSS :nth-of-type（） 伪类根据元素在相同类型的同级（标签名称）中的位置来匹配元素。

语法

:nth-of-type( | even | odd) {
	 	/* ... */
}

可能的值

  • 奇数 − 此值表示从末尾开始计数的系列中的所有奇数（例如，1,3,5..etc）同级元素。
  • 偶数 − 此值表示从末尾开始计数的系列中的所有偶数（例如，2,4,6...等）同级元素。
  • 函数表示法 （<an+b>） − 此值表示从其父容器的末尾开始计数的序列中的每个 an+b 子元素，其中 a 是正整数，n 是从 0 开始的计数器变量。b 是另一个正整数。

CSS :nth-of-type（） 示例

下面是一个如何使用 :nth-of-type（） 选择器来设置第二个 span 元素的样式的示例 -

<html>
<head>
<style>
	 	span:nth-of-type(2) {
	 	 	 background-color: pink;
	 	 	 color: blue;
	 	}
</style>
</head>
<body>
	 	<p>This is a <b>p</b> tag. </p>
	 	<span>This is first <b>span</b> tag.</span>
	 	<p>This is a <b>p</b> tag. </p>
	 	<span>This is second <b>span</b> tag</span>
	 	<p>This is a <b>p</b> tag. </p>
</body>
</html>

以下是如何设置奇数段落样式的示例 -

<html>
<head>
<style>
	 	p:nth-of-type(2n+1) {
	 	 	 background-color: pink;
	 	 	 color: blue;
	 	}
</style>
</head>
<body>
	 	<p>This is first <b>p</b> tag. </p>
	 	<div>This is first <b>div</b> tag.</div>
	 	<p>This is second <b>p</b> tag.</p>
	 	<p>This is third <b>p</b> tag.</p>
	 	<p>This is fourth <b>p</b> tag.</p>
	 	<div>This is second <b>div</b> tag..</div>
</body>
</html>

 

<< CSS - 伪类 :nth-last-of-type() CSS - 伪类 :only-child >>