Question

我有像这样的div元素

<div id="container">
    <div id="content">
        <div class="arrow"></div>
    </div>
    <div id="content">
        <div class="arrow"></div>
    </div>
    <div id="content">
        <div class="arrow"></div>
    </div>
    <div id="content">
        <div class="arrow"></div>
    </div>
</div>

我想选择第一个孩子，但我有一个像这样的CSS

#container #content:nth-child(odd) .arrow {
    background: red;
}
#container #content:nth-child(even) .arrow {
    background: green;
}
#container #content:first-child .arrow {
    background: pink;
}

但是，第一个孩子是红色的，因为第一个孩子是一个奇数。

我尝试使用它，我不知道它是否会起作用而且它没有

#container #content:nth-child(odd):not(:first-child) .arrow {
    background: red;
}

但是，第一个div的箭仍然是红色。

我做错了什么？

Answer 1

:nth(odd)只是:nth(2n+1)的快捷方式，如果内存有效，我认为:nth(2n+3)可能有用。

Answer 2

试试这个：

#container #content:first-child .arrow {
    background: pink!important;
}

优先考虑该值

问候！

选择除了第一个孩子之外的奇数元素

2 个答案: