>首页> IT >

【环球聚看点】css如何让第一个li不加样式

时间:2022-09-02 19:04:44       来源:PHP中文网

前端(vue)入门到精通课程:进入学习


(相关资料图)

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

让第一个li不加样式,就是给除了第一个li以外的其他li加样式。

3种实现方法

方法1:使用选择器:not()和:first-child

利用:first-child选取第一个元素

然后使用:not()匹配非第一个子元素的其他元素

示例:让第一个li不加红色背景样式,给除了第一个li元素的其他li元素添加红色背景

  • 1
  • 2
  • 3
  • 4
  • 5

说明:

:not(selector)选择器匹配非指定元素/选择器的每个元素。

:first-child选择器用于选取属于其父元素的首个子元素的指定选择器。

方法2:使用:nth-of-type()

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

n是从0开始的,那么n+2自然就是从第2个元素开始了。

li:nth-of-type(n+2){background:pink;}

同理如果选中单数元素那么就是2n+1;如果是想选中双数元素,那么就应该写成2n+2;具体情况可以根据项目情况使用。

li:nth-of-type(2n+1){background:pink;}li:nth-of-type(2n+2){background:green;}

方法3:使用:nth-child()

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

方法3和方法2类型,设置()的值为“n+2”即可。

li:nth-child(n+2){background:green;}

同样如果选中单数元素那么就是2n+1;如果是想选中双数元素,那么就应该写成2n+2;具体情况可以根据项目情况使用。

li:nth-child(2n+1){background:green;}li:nth-child(2n+2){background:pink;}

(学习视频分享:web前端入门)

以上就是css如何让第一个li不加样式的详细内容,更多请关注php中文网其它相关文章!

关键词: 具体情况 相关文章 外的其他