一、选择列表中的偶数标签 :nth-child(2n) 二、选择列表中的奇数标签 :nth-child(2n-1) 三、选择从第6个开始的,直到最后:nth-child(n+6) 四、选择第1个到第6个 :nth-child(-n+6) 一、两者结合使用,可以限制选择某一个范围,选择第6个到第9个 :nth-child(n+6):nth-child(-n+9)...
这里需要说明一下,那就是,这里的数字,和JS或者其他编程语言是不一样的.一般的编程语言是从0开始为第一个,而这里,可能是顾及我们一般的csser的编程基础可能不时很好,所以,1就是1,而不是1是0. 选择前三个 代码语言:javascript 复制 ul.list li:nth-child(-n+3){background:#000;} 这是选择前三个的方法...
使用CSS选择器:nth-child(),能轻松修改特定子元素的样式。该选择器不考虑子元素的类型,直接选取父元素的第N个子元素。要修改父元素的前三个子元素的样式?简单,使用:nth-child(1n)即可。若需选择列表中的偶数标签,可以使用:nth-child(2n);而要选择奇数标签,则是:nth-child(2n-1)。若需从第...
而在nth-child中,结果取决于当前元素的所有兄弟节点的排列,因此插入的元素可能会改变结果。例如,p:nth-child(4)会选择当前元素的第四个兄弟节点,即无论插入什么元素,只要在目标元素前有三个兄弟节点,结果都不会改变。然而,p:nth-of-type(4)则只选择目标元素的直接兄弟中的第四个,不考虑插入...
三、nth-of-type 3.1选择容器中每一类标签的第三个子元素 如图,第三个div和p元素均被选中: 3.2可以给伪类前加类名限定 可以给伪类前加类名限定 有status类的子元素中第三个被选中: 对于倒序的选择也是一样的: 有status类的子元素中倒数第三个被选中: ...