如何使用伪元素选择前两个框类答案

【问题标题】：how to select first two box classes by using pseudo-element如何使用伪元素选择前两个框类
【发布时间】：2017-06-22 09:29:56
【问题描述】：

共有四个盒子类，我无法选择盒子类的前两个元素

<div class="quiz-options">
                            <div class="row just">
                                <div class="col-md-6 col-sm-8 col-xs-12">
                                    <div tabindex="1" class="box"><!-- <i class="fa fa-check-circle-o option-r" aria-hidden="true" style="font-size: 18px"></i> -->
                                        <!-- <span class="quiz-opt">A</span> -->Comuter</div>
                                </div>
                                <div class="col-md-6 col-sm-8 col-xs-12">
                                    <div tabindex="2" class="box">
                                        <!-- <span class="quiz-opt">B</span> -->Vechile</div>
                                </div>
                                <div class="col-md-6 col-sm-8 col-xs-12">
                                    <div tabindex="3" class="box">
                                        <!-- <span class="quiz-opt">C</span> -->Motor</div>
                                </div>
                                <div class="col-md-6 col-sm-8 col-xs-12">
                                    <div tabindex="4" class="box">
                                        <!-- <span class="quiz-opt">D</span> -->None</div>
                                </div>
                            </div>
                        </div>

【问题讨论】：

简单解释一下......
你想要元素，没有
测验选项中总共有 4 个框，我尝试了两个只为前两个框添加背景颜色..

标签： javascript html css frontend

【解决方案1】：

你的意思是这样的？

.row.just div > .box:first-child,
.row.just div > .box:nth-child(2) {
    /** css code **/
}

或者如果您想使用 JavaScript - jQuery 进行选择：

$(".row.just div > .box:first-child")
$(".row.just div > .box:nth-child(2)") 
....

【讨论】：

【解决方案2】：

在这种情况下你可以使用 nth-child

 .box:nth-child(1),
 .box:nth-child(2)
 {
 background-color:#fff;
 }

【讨论】：

【解决方案3】：

您可以使用:nth-child(n) 选择器。 :nth-child(n) 应该应用于.box 元素的父级，因为.row 元素有四个子级。

.row div:nth-child(1) .box,.row div:nth-child(2) .box{
background:red;
}

<div class="quiz-options">
                            <div class="row just">
                                <div class="col-md-6 col-sm-8 col-xs-12">
                                    <div tabindex="1" class="box"><!-- <i class="fa fa-check-circle-o option-r" aria-hidden="true" style="font-size: 18px"></i> -->
                                        <!-- <span class="quiz-opt">A</span> -->Comuter</div>
                                </div>
                                <div class="col-md-6 col-sm-8 col-xs-12">
                                    <div tabindex="2" class="box">
                                        <!-- <span class="quiz-opt">B</span> -->Vechile</div>
                                </div>
                                <div class="col-md-6 col-sm-8 col-xs-12">
                                    <div tabindex="3" class="box">
                                        <!-- <span class="quiz-opt">C</span> -->Motor</div>
                                </div>
                                <div class="col-md-6 col-sm-8 col-xs-12">
                                    <div tabindex="4" class="box">
                                        <!-- <span class="quiz-opt">D</span> -->None</div>
                                </div>
                            </div>
                        </div>

【讨论】：

【解决方案4】：

.row.just > div:nth-child(-n+2) {
  background-color: red;
}

<div class="quiz-options">
  <div class="row just">
    <div class="col-md-6 col-sm-8 col-xs-12">
      <div tabindex="1" class="box">
        <!-- <i class="fa fa-check-circle-o option-r" aria-hidden="true" style="font-size: 18px"></i> -->
        <!-- <span class="quiz-opt">A</span> -->Comuter</div>
    </div>
    <div class="col-md-6 col-sm-8 col-xs-12">
      <div tabindex="2" class="box">
        <!-- <span class="quiz-opt">B</span> -->Vechile</div>
    </div>
    <div class="col-md-6 col-sm-8 col-xs-12">
      <div tabindex="3" class="box">
        <!-- <span class="quiz-opt">C</span> -->Motor</div>
    </div>
    <div class="col-md-6 col-sm-8 col-xs-12">
      <div tabindex="4" class="box">
        <!-- <span class="quiz-opt">D</span> -->None</div>
    </div>
  </div>
</div>

【讨论】：