Css 第n个子元素(n+4):第n个子元素(-n+8)如何选择一系列元素?

Css 第n个子元素(n+4):第n个子元素(-n+8)如何选择一系列元素?,css,css-selectors,Css,Css Selectors,根据,当通过第n个子元素设置一系列元素的样式时,我们必须执行以下操作: :n个孩子n+4:n个孩子n+8 如果我们只使用一个:n子元素,那么我们可以看到它按照该公式为所有元素设置样式 这两个:n子选择器中的每一个如何抵消另一个对超出范围的元素的影响?以这种方式组合简单选择器只意味着您正在寻找同时匹配所有给定条件的元素。组合伪类与组合其他类型的简单选择器没有什么不同,例如div.example或input[type=checkbox]:checked 所以:nth-childn+4:nth-chi

根据,当通过第n个子元素设置一系列元素的样式时,我们必须执行以下操作:

:n个孩子n+4:n个孩子n+8 如果我们只使用一个:n子元素,那么我们可以看到它按照该公式为所有元素设置样式


这两个:n子选择器中的每一个如何抵消另一个对超出范围的元素的影响?

以这种方式组合简单选择器只意味着您正在寻找同时匹配所有给定条件的元素。组合伪类与组合其他类型的简单选择器没有什么不同,例如div.example或input[type=checkbox]:checked

所以:nth-childn+4:nth-child-n+8只是指同时是:nth-childn+4和:nth-child-n+8的任何元素。单独使用时,这只能是任一选择器匹配项的子集

这就是得到一系列元素的方法

如何判断哪些元素将被匹配?简单:查看每个A+B表达式中的B:

:n第n个孩子n+4匹配从第4个(含第4个)开始的孩子 :n-child-n+8匹配第8个之前(含第8个)的子级 您链接到的网站中已经说明了这一切的工作原理,但前面的示例分别使用了:nth-child-n+6和:nth-child-n+9,这可能有点让人困惑。下面是一个更加一致的示例,演示了两个选择器如何组合忽略CSS中的::before/::after/内容位-只需关注输出:

李:以前{ 内容:"李";; } 李:第n个孩子n+4::之前{ 内容:'li:n个孩子n+4'; } 李:n-child-n+8::之后{ 内容:':n-child-n+8'; }