Question

<div class="one">
    <div> </div>
    <div class="three"> </div>
    <div class="four"> </div>

</div>
<div class="one">
    <div> </div>
    <div class="three"> </div>
    <div class="four"> </div>
</div>
<div class="one">
    <div> </div>
    <div> </div>
</div>

我想选择第四类的第一个div，我不想选择任何其他第四类的div，只有第一个。

如何使用CSS实现这一目标？

Answer 1

您只需使用first-child即可完成此操作。您可以将您的班级称为+ first-child，然后再拨打div。告诉它你只需要你所调用的类的第一个实例。

one:first-child .four表示您只需要第一个four类的one类。

以下是一个示例：jsfiddle。

.one:first-child .four{
  /* Your code here...*/
}

Answer 2

最合适的选择方式是第一个片段。但是可以有很多方法来选择它。

.one:nth-of-type(1) > .four{
   color: red;
   background: pink;
}

    <div class="one">
        <div> First div 1st Child</div>
        <div class="three">First div 2nd child</div>
        <div class="four">First div 3rd Child </div>

    </div>
    <div class="one">
        <div>2nd div first child </div>
        <div class="three">2nd div 2nd child</div>
        <div class="four">2nd div 3rd child </div>
    </div>
    <div class="one">
        <div> </div>
        <div> </div>
    </div>

div:first-of-type > .four{
  color: red;  
  background: pink;
}

<div class="one">
    <div> First div 1st Child</div>
    <div class="three">First div 2nd child</div>
    <div class="four">First div 3rd Child </div>

</div>
<div class="one">
    <div>2nd div first child </div>
    <div class="three">2nd div 2nd child</div>
    <div class="four">2nd div 3rd child </div>
</div>
<div class="one">
    <div> </div>
    <div> </div>
</div>

Answer 3

您必须唯一地定义它们。抓取类“one”将范围细化为class =“one”的所有元素。

如果您特别想要该项目，则可以使用“id”而不是类来识别它。 id =“四”或其他独特的东西。

ID通常用于允许单独访问，而class通常用于将元素分组以一次更改所有内容。您可以在同一元素上使用这两个属性。

Answer 4

请参阅此fiddle

可以使用:first-child选择器完成此操作，如下所示

<强> CSS

.one:first-child >.four {
    background-color:red;
    height:50px;
    width:50px;
}

您可以使用.one:first-child >.four

定位该div

如何使用CSS选择此Div

4 个答案:

请参阅此fiddle