css怎么给指定第几个li加样式

233 阅读 0 评论 154 点赞

我是靠谱客的博主秀丽大炮，这篇文章主要介绍css怎么给指定第几个li加样式，现在分享给大家，希望可以做个参考。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css选取指定第几个li并加样式

方法1：使用:first-child选择器给第1个li加样式

:first-child 选择器匹配其父元素中的第一个子元素。

复制代码<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			li{
				float: left;
				height: 50px;
				line-height: 50px;
				width: 50px;
				margin: 20px;
				background: #ccc;
				text-align: center;
				color: #fff;
			}
			li:first-child{
				background:red;
			}
		</style>
	</head>

	<body>
		<ul class="dom">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>

</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			li{
				float: left;
				height: 50px;
				line-height: 50px;
				width: 50px;
				margin: 20px;
				background: #ccc;
				text-align: center;
				color: #fff;
			}
			li:first-child{
				background:red;
			}
		</style>
	</head>

	<body>
		<ul class="dom">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>

</html>
登录后复制

方法2：使用:last-child选择器给最后1个li加样式

:last-child选择器用来匹配父元素中最后一个子元素。

复制代码li:last-child{
	background:pink;
}1
2
3
li:last-child{
	background:pink;
}
登录后复制

方法3：使用:nth-of-type()选择器给第N个li加样式

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素

复制代码li:nth-of-type(1){  /* 第1个li加样式 */
	background:red;
}
li:nth-of-type(2){  /* 第2个li加样式 */
	background:pink;
}
li:nth-of-type(3){  /* 第3个li加样式 */
	background:green;
}1
2
3
4
5
6
7
8
9
li:nth-of-type(1){  /* 第1个li加样式 */
	background:red;
}
li:nth-of-type(2){  /* 第2个li加样式 */
	background:pink;
}
li:nth-of-type(3){  /* 第3个li加样式 */
	background:green;
}
登录后复制

()内的参数可以是公式或关键字Odd（奇数）和 even（偶数）

n+2从第2个元素开始加样式。

复制代码li:nth-of-type(n+2){
	background:red;
}1
2
3
li:nth-of-type(n+2){
	background:red;
}
登录后复制

同理如果选中单数元素那么就是2n+1（或者使用odd）；如果是想选中双数元素，那么就应该写成2n+2（或者使用even）；

复制代码li:nth-of-type(2n+1){
background:pink;
}
li:nth-of-type(even){
background:green;
}1
2
3
4
5
6
li:nth-of-type(2n+1){
background:pink;
}
li:nth-of-type(even){
background:green;
}
登录后复制

方法4：使用:nth-child()选择器给第N个li加样式

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

复制代码li:nth-child(1){  /* 第1个li加样式 */
	background:red;
}
li:nth-child(3){  /* 第3个li加样式 */
	background:pink;
}
li:nth-child(5){  /* 第5个li加样式 */
	background:green;
}1
2
3
4
5
6
7
8
9
li:nth-child(1){  /* 第1个li加样式 */
	background:red;
}
li:nth-child(3){  /* 第3个li加样式 */
	background:pink;
}
li:nth-child(5){  /* 第5个li加样式 */
	background:green;
}
登录后复制

()内的参数可以是公式或关键字Odd（奇数）和 even（偶数）

复制代码li:nth-child(odd){ 
	background:red;
}
li:nth-child(2n+2){
background:pink;
}1
2
3
4
5
6
li:nth-child(odd){ 
	background:red;
}
li:nth-child(2n+2){
background:pink;
}
登录后复制