1.first-child 选择列表中的第一个标签 li:first-child{color:red} 2. last-child 选择列表中的最后一个标签 li:last-child{color:pink} 3.nth-child(n) 这里的n为数字,表示选择列表中的第n个标签 例如选择第三个标签 li:nth-child(3){color:pink} 4.nth-child(2n) 选择列表中的偶数,选中 2、4、6...
:nth-last-child()选择器允许你基于元素的兄弟元素总数来选择元素,从最后一个元素开始计数。在这个场景中,我们需要选择最后三个元素,因此需要分别使用:nth-last-child(1)、:nth-last-child(2)和:nth-last-child(3)。 编写CSS规则: 为这三个选择器编写一个CSS规则,以应用相同的样式。 下面是一个具体的示例代...
nth-last-child(-n+3)匹配最后三个子元素 .item li:nth-child(-n+3){background-color:red;}.item li:nth-last-child(-n+3){background-color:pink;} 特殊规律实现方法 分别实现(3,7,11) 、(3,7,11) 、(2, 5, 8, 11) 一些特殊规律的情况,这里只分别列举几个规律方便大家看出。 /* 3,7,1...
nth-child(n + 2) 选择器从第2个子元素开始选择。 nth-child(-n + 5) 选择器从第1个子元素选择到第5个子元素。 组合使用时,会选中从第2个到第5个子元素。 3. li:nth-last-child(-n + 2) nth-last-child(-n + 2) 选择器从父元素的最后一个子元素向前数,选择倒数前两个子元素。 - end -...
first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} 3、nth-child(3) ...
1、first-child first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} 3、nth-child(3) 表示选择列表中的第3个...
选择第N个LI 代码语言:javascript 复制 ul.list li:nth-child(3){background:#000;} 如上面的CSS所示,如果要选择第三个,就写3即可. 这是最简单的.我们可以使用这种方法,给不同的li加上不同的样式,如果你有需要,都可以分别订制的. 如果是第一个,或者最后一个,写法还可以更改为 ...
:nth-last-child() 选择器 :nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。 n 可以是数字、关键词或公式。 提示:请参阅 :nth-last-of-type() 选择器,该选择器选取父元素的第 N 个指定类型的子元素,从最后一个子元素开始计数。
nth-last-child(n+n)nth-last-child(n+n):选择倒数第 n 个之前的元素。 举例:倒数第三个及之前的元素字体设置为粗体,代码如下: 代码语言:javascript 复制 li:nth-last-child(n+3){font-weight:bold;} 上面的几种方法运行效果如下图: nth-last-child(3n)nth-last-child(3n):选择第 3、6、. . . ...
(n+3)指定等于大于第三个3个后li设置样式ul,li{list-style:none;margin:0;padding:0}ulli:nth-child(n+3){color:#F00}/*设置大于等于第3的个li 字体颜色为红色*/第一排 CSS5实例第二排第三排第四排第五排第六排