Làm thế nào tôi có thể nhận được mọi phần tử thứ hai nếu mỗi phần tử được nhúng vào một phần tử khác?

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> 

Tôi có thể tạo kiểu cho mỗi chế độ xem lớp thứ hai bằng css thuần túy như thế nào.

Trong jquery tôi sẽ làm

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

Nhưng làm thế nào tôi có thể làm CSS này?

Answer 1

Bạn có thể sử dụng tài sản :nth-child cho việc này:

Ví dụ:

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

:nth-child(2) sẽ chọn chỉ mục thứ hai, trong khi :nth-child(2n) sẽ chọn mỗi mục thứ hai.

Answer 2

Như @Andrej và @sandeep nói, nó không làm việc:

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

Vâng, bạn có thể làm cho hộp là có một nửa widht (50%)? Sau khi họ nổi sang bên trái và sau đó rõ ràng sẽ là giải pháp tốt nhất

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

Đây là một fiddle: https://jsfiddle.net/r5xq9von/