li:nth-child(-n+3){background:#2cae1d;} nth-child(n+n)nth-child(n+n):选择第 n 个之后的元素。 举例:第五行及以后背景色设置为蓝色,代码如下: 代码语言:javascript 复制 li:nth-child(n+5){background:#0ab1fc;} nth-last-child(n)nth-last-child(n):选择倒数第 n 个元素。 举例:倒数第三...
li:first-child {color: red; } 选择最后一个元素:使用:last-child选择器。例如,选择最后一个元素并将其字体颜色设置为绿色: li:last-child {color: green; } 选择第n个元素:使用:nth-child(n)。例如,选择第三个元素并将其字体颜色设置为蓝色: li:nth-child(3) {color: blue; } ...
E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素 可以看到,我主要写了5个div,但是如果我想要给每个div分配设置不同的样式,按照以前的做法就是给每个div进行类名定义。这样感觉写html部分是比较麻烦。 现在有了这个新选择器,就可以这样做,如下: E:first-child:匹配元素类型为E且是父元素的第一个子元...
:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。n 可以是一个数字,一个关键字,或者一个公式。提示: 请参阅选择器。该选择器匹配同类型中的第 n 个同级兄弟元素。 语法element:nth-child(n)element 是你想要选择的 HTML 元素。 n 是一个参数,可以是关键字(如 odd 或even),或者...
1.1、nth-child(n)父元素下的第n个子元素,n必须大于0,索引都是从1开始。 div p:nth-child(2){background:skyblue; } ps、这里仅仅说是父元素的第几个子元素,而并没有限制该类型的子元素。比如: 天气多云转晴多云转晴多云转晴多云转晴多云转晴 运行之后: 1.2、nth-child(odd)父元素下的奇数子元素 等同于...
语法::nth-child(n) 说明::nth-child() 是CSS3的一个伪类选择器,匹配父元素中的第 n 个子元素,元素类型没有限制。 n可以是一个数字,一个关键字,或者一个公式。 下面用案例来说明各个常见的情况用法 原始效果demo <liv-for="item in listData">{{item.pname}}{{item.type}}{{item.LJTZJH}}{{item...
li:nth-child(-n+9) { background: #ff0000; border-bottom: 1px; } 7、前后限制范围,选择第6个到第9个 li:nth-child(n+6):nth-child(-n+9) { background: #ff0000; border-bottom: 1px; } ... 8、范围高级用法:选中的子元素是从第2位到第9位,并且只包含奇数位。 li: ...
在CSS中，nth-child选择器可以接受各种不同的参数，以选择特定的子元素。其中最常见的参数是n和关键词even（偶数）和odd（奇数）。当使用n作为参数时，可以选择每个子元素，从1开始递增。例如，:nth-child(2n)会选择所有偶数位置的子元素。类似地，:nth-child(2n+1)会选择所有奇数位置的子元素。而关键词even和...
li:last-child { background-color: red; } 3):nth-child(n):选取父元素中第n个子元素。 示例:将列表中的奇数位置的项目的背景色改为蓝色: li:nth-child(odd) { background-color: blue; } 3.4 否定伪类选择器 这类选择器用于排除符合特定条件的元素。例如: ...