CSS仅选择第一次出现的类

如何解决CSS仅选择第一次出现的类

我需要为第一次出现的类（.border）添加样式，而不是其他样式。

HTML

<div class="col">
  <div>
    <div class="border">
      <section>
        <div>
          <div>
            <div class="border">No Border</div>
          </div>
        </div>
        <div>
          <div>
            <div class="border">No Border</div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

CSS

.col{
  padding: 100px;
}
.col section{
  display: flex;
  justify-content: space-around;
  padding: 50px;
}

.col .border{
  border: solid;
}

https://jsfiddle.net/stemon/qw9ezu2h/2/

解决方法

第一种方法

在CSS中使用直接子级（>）选择器。

.col > div >.border{
  border: solid;
}

.col{
  padding: 100px;
}
.col section{
  display: flex;
  justify-content: space-around;
  padding: 50px;
}

.col > div >.border{
  border: solid;
}

<div class="col">
  <div>
    <div class="border">
      <section>
        <div>
          <div>
            <div class="border">No Border</div>
          </div>
        </div>
        <div>
          <div>
            <div class="border">No Border</div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

第二种方法

只需使用.col section .border{}来获得类border的第二次和第三次出现，以禁用与他们的边界，

.col .border{
  border: solid;
}
.col section .border{
  border:none;
}

.col{
  padding: 100px;
}
.col section{
  display: flex;
  justify-content: space-around;
  padding: 50px;
}

.col .border{
  border: solid;
}
.col section .border{
  border:none;
}

<div class="col">
  <div>
    <div class="border">
      <section>
        <div>
          <div>
            <div class="border">No Border</div>
          </div>
        </div>
        <div>
          <div>
            <div class="border">No Border</div>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

,

您应该这样做：

.col > div > .border{
    ... your code...
}