Question

总共有四个盒子类，我无法用盒子类

选择前两个元素

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

Answer 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)") 
....

Answer 2

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

new User();

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何使用伪元素选择前两个box类

4 个答案: