如果每个元素都嵌入另一个元素,我如何获得每个元素？

Question

<div class="question_container">
    <div class="views">
        <div>10</div>
    </div>
    <div>Something else</div>
</div>
<div class="question_container">
    <div class="views">
        <div>10</div>
    </div>
    <div>Something else</div>
</div>
<div class="question_container">
    <div class="views">
        <div>10</div>
    </div>
    <div>Something else</div>
</div>

如何在纯CSS中为每个第二类视图设置样式.

在jquery我会这样做

$('*[class=views]:even').addClass('views');

但是我该怎么做这个CSS呢？

Answer 1

你可以使用这个:nth-child属性:

例:

.question_container:nth-child(2n) .views{
    color: red;
}

:nth-child(2)将仅选择第二个项目,同时:nth-child(2n)将选择每个第二个项目.

Answer 2

您可以将:nth-child选择器与even关键字一起使用。

.question_container:nth-child(even) .views{
    /* styles for every second class */
}

我不会将:nth-child(1n)Nor:nth-child(2n)用于选择奇数或偶数子项的琐碎情况。尽管这些完全有效，但它们不如关键字odd和清晰even；特别是对于那些不每天使用 CSS 的人来说。