css - 如果每个元素都嵌入另一个元素中，我怎样才能获得第二个元素？

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)也不使用。:nth-child(2n)尽管这些是完全有效的，但它们不如关键字odd和even; 特别是对于那些每天不使用 CSS 的人。

Answer 3

正如@Andrej 和@sandeep 所说，它确实有效：

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

<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>

https://jsfiddle.net/pxmqc1au/

Answer 4

那么你可以让盒子有一半的宽度（50%）吗？让它们向左浮动然后清除将是最好的解决方案

HTML：

<div class="legend-box">
  <div class="box"> [] box 1 </div>
  <div class="box"> [] box 2 </div>
  <div class="box"> [] box 3 </div>
  <div class="box"> [] box 4 </div>
  <div class="box"> [] box 5 </div>
  <div class="box"> [] box 6 </div>
  <div class="clear"></div>
</div>

CSS：

.box {
  display: inline-block;
  width: 50%;
  float: left;
}

.clear {
  clear: both;
}

这是一个小提琴： https ://jsfiddle.net/r5xq9von/