CSS nth-child 表示大于和小于

2022-01-10 00:00:00 css-selectors html css

在我的 HTML 中，

<div class="container"></div><div 类="容器"></div><div 类="容器"></div><div 类="容器"></div>..........................................

在上面的 HTML 中，我有 container 类.在我的 CSS 中，我需要添加一些样式到 .container:nth-child(3,4,5,6,..等等).意味着我需要应用除 1 和 2 之外的所有 nth-child.

解决方案

:nth-child() 不适用于类，它会查找元素本身.您需要通过包装器包装 .container div 并使用以下内容:

.wrapper div:nth-child(n+3) {/* 把你的样式放在这里... */}

<div class="wrapper"><div class="container"></div><div class="container"></div><div class="container"></div><div class="container"></div></div>

工作演示.

澄清:nth-child()

使用 .container:nth-child(n+3) 可能有效，也可能无效.因为，:nth-child() 伪类表示匹配选择器的 nth 子元素(本例中为 .container).

如果 .container 元素不是其 parent 的 nth-child，则不会被选中.

来自规范:

<块引用>

:nth-child(an+b) 伪类表示法表示一个元素在文档树中之前有 an+b-1 siblings 的，对于任何n 的正整数或零值，并且有一个父元素.

考虑这个例子:

在这种情况下，.container:nth-child(2) 不会选择第二个 div.container 元素(它有 5th 内容).因为该元素不是其父级的第二个子级，在父级的子级树中.

另外，.container:nth-child(n+3) 将选择所有 div.container 元素，因为 n 从 0 表示父级子树中的第一个元素，第一个 div.container 是其父级的第 4 个子节点.

n 从 0 开始n = 0: (0 + 3) = 3 =>第三个元素n = 1: (1 + 3) = 4 =>第 4 个元素n = 2: (2 + 3) = 5 =>第五元素...

因此 div.container:nth-child(n+3) 代表所有 3rd、4th、5th, ... 匹配 div.container 选择器的子元素.

在线演示.

In my HTML I have,

<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
..................
..................

In the above HTML I have the container class. In my CSS, I need to add some styles to .container:nth-child(3,4,5,6,..and so on). Means I need to apply all nth-child beside 1 and 2.

解决方案

:nth-child() doesn't work on classes, it looks for the element itself. You'd need to wrap the .container divs by a wrapper and use the following:

.wrapper div:nth-child(n+3) {
   /* put your styles here... */
}


<div class="wrapper">
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
</div>

Working Demo.

Clarifying on :nth-child()

Using .container:nth-child(n+3) may or may not work. Because, :nth-child() pseudo-class represents nth child element matching the selector (.container in this case).

If the .container element isn't the nth-child of its parent, it won't be selected.

From the Spec:

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.

Consider this example:

<div class="parent">
    <div>1st</div>
    <div>2nd</div>
    <div>3rd</div>
    <div class="container">4th</div>
    <div class="container">5th</div>
    <div class="container">6th</div>
    <div>7th</div>
    <div class="container">8th</div>
    <div>9th</div>
</div>

In this case, .container:nth-child(2) won't select the 2nd div.container element (which has 5th content). Because that element is not the 2nd child of its parent, in parent's children tree.

Also, .container:nth-child(n+3) will select all the div.container elements because n starts from 0 for the first element in the parent's children tree, and the first div.container is the 4th child of its parent.

n starts from 0

n = 0: (0 + 3) = 3 => 3rd element
n = 1: (1 + 3) = 4 => 4th element
n = 2: (2 + 3) = 5 => 5th element
...

Hence div.container:nth-child(n+3) represents all the 3rd, 4th, 5th, ... child elements matching div.container selector.

Online Demo.

相关文章