css结构选择器

最新推荐文章于 2023-01-12 12:21:11 发布

lhrdlp

最新推荐文章于 2023-01-12 12:21:11 发布

阅读量1.8k

点赞数 6

分类专栏： css

本文链接：https://blog.csdn.net/lhrdlp/article/details/101173335

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

结构伪类选择器

结构选择器用于选出特定的想要的元素，可以实现隔行变色的效果。

first-child：用于选取第一个元素。

last-child：选取最后一个元素。

nth-child(n):选取第n个元素，n从0 开始。

常用属性：

nth-child(odd) ：选出奇数行；

nth-child(even)：选出偶数行；

nth-child(n)：所有行（n从0开始）；

nth-child(2n)：选出偶数行（2*0；2*1；2*2....）;[其中括号中的公式可以自己定义，如3n,5n等]

nth-child(2n+1)：选出偶数行；

nth-last-child：从最后一个开始倒数；

【例1】、写一段代码选出其中的第一行，最后一行，第四行。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		li:first-child {  /* 选出第一行元素 */
			color: pink;
		}
		li:last-child {    /* 选出最后一行元素 */
			color: skyblue;
		}
		li:nth-child(4) {   /*  选出第四行元素 */
			color: purple;
		}
	</style>
</head>
<body>
	<ul>
		<li>高数</li>
		<li>线性代数</li>
		<li>概率统计</li>
		<li>数据结构</li>
		<li>计算机网络</li>
	</ul>
</body>
</html>

结果如下图所示：

【例2】选出所有奇数行元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		li:nth-child(odd) {
       color: skyblue;
		}
	</style>
</head>
<body>
	<ul>
		<li>高数</li>
		<li>线性代数</li>
		<li>概率统计</li>
		<li>数据结构</li>
		<li>计算机网络</li>
	</ul>
</body>
</html>

结果如下：

【例3】选出所有偶数行元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		li:nth-child(even) {
       color: skyblue;
		}
	</style>
</head>
<body>
	<ul>
		<li>高数</li>
		<li>线性代数</li>
		<li>概率统计</li>
		<li>数据结构</li>
		<li>计算机网络</li>
	</ul>
</body>
</html>

结果如下：

【例4】选出所有3的倍数行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		li:nth-child(3n) {
       color: skyblue;
		}
	</style>
</head>
<body>
	<ul>
		<li>高数</li>
		<li>线性代数</li>
		<li>概率统计</li>
		<li>数据结构</li>
		<li>计算机网络</li>
		<li>计算机操作系统</li>
	</ul>
</body>
</html>

结果如下：

【例5】选出所有奇数行，不使用odd

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		li:nth-last-child(2n) {
       color: skyblue;
		}
	</style>
</head>
<body>
	<ul>
		<li>高数</li>
		<li>线性代数</li>
		<li>概率统计</li>
		<li>数据结构</li>
		<li>计算机网络</li>
		<li>计算机操作系统</li>
	</ul>
</body>
</html>

结果如下：