nth-child()括号里面的顺序号是指“兄弟姐妹”之间的序号，并不是整个家族不分辈分的序号。在你的代码中，第一个div和第二个div是兄弟关系，它们的序号是1和2，所以它们分别获得了第1个和第2个样式，而3-1和3-2这两个div则是前两个div的“侄子”（它们外面所套的那个div则是它们的“父亲”）...
在十年前开始的div+css布局兴起之时,我就开始了CSS的学习和实践.在当年,对于CSS选择器,基本上是没有什么选择性的,只有ID选择器,CLASS选择器,以及元素选择器,当然,还包括#id p这种子选择器. 在那个蛮荒时代,各大浏览器对CSS的支持是相当那啥了.于是,我们为了实现一些效果,比如要控制列表中的最后一个元素,我们...
一个是.box p:nth-child(2)，一个是.box p:nth-of-type(2)，括号里面都2，但是效果却不同。那么到底这两个选择器是什么意思呢?分析：我们再来看下结构：.box的子元素有三个，第一个是h2标签，第二个和第三个是p标签。 我是h2标签 我是.box里的第二个子元素，我是第一个p标签 我是.b...
在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, 而ele:nth-child(n)是指父元...
0057 结构伪类选择器 -- :nth-child(n) 、 :nth-of-type(n),如果页面中有两个这样的div结构,则两个第一个我是span,都是pink我是一个p标签我是span我是span我是span</di
这里须要说明一下,那就是,这里的数字,和JS或者其它编程语言是不一样的.一般的编程语言是从0開始为第一个,而这里,可能是顾及我们一般的csser的编程基础可能不时非常好,所以,1就是1,而不是1是0. 选择前三个 ul.listli:nth-child(-n+3){background:#000;} ...
通过2.1和2.2知道nth-child选择元素时不区分元素的标签类型,统一排序选择对应序号的元素。 2.3选择第一个和最后一个元素的特殊选择器 2.4倒序选择器,用法与nth-child一样,从后向前排序。 2.5可以给伪类前加标签限定 如下是选择容器下的第一个且是div的子元素: ...
写两个就是了。。:nth-child(n+3){} :not(:last-child){}
这是选择前三个的方法. 选择从第四个开始到最后 ul.list li:nth-child(n+4){background:#000;} 选择第四个到第八个 ul.list li:nth-child(n+4):nth-child(-n+8){background:#000;} 这里,其实就是把前面两种方法给集成了一下. 选择奇数行 ...
而在nth-child中，结果取决于当前元素的所有兄弟节点的排列，因此插入的元素可能会改变结果。例如，p:nth-child(4)会选择当前元素的第四个兄弟节点，即无论插入什么元素，只要在目标元素前有三个兄弟节点，结果都不会改变。然而，p:nth-of-type(4)则只选择目标元素的直接兄弟中的第四个，不考虑插入...