Question

我想使用CSS选择器在所有div中选择包含con和car的第一个div。

<div class="box">
  <div class="con">1</div>
  <div class="con be">2</div>
  <div class="con car">3</div>
  <div class="con">4</div>
  <div class="con be">5</div>
  <div class="con car">6</div>
</div>

con和car div可以在任何地方。因为它现在是第三个孩子，所以我可以通过将第n个孩子作为第三个孩子来称呼它。但这是具有con和car类的第一个div。我可能会添加更多的con和car div，但我希望能够选择第一个con和car div并为其设置样式，尽管它的位置。我该怎么办？

Answer 1

一种可能的解决方案是使用subsequent-sibling combinator ~

定位您不想设置样式的类

.con.car ~ .con.car {
  background: none;
}

.con.car {
  background: red;
}

<div class="box">
  <div class="con">1</div>
  <div class="con be">2</div>
  <div class="con car">3</div>
  <div class="con">4</div>
  <div class="con be">5</div>
  <div class="con car">6</div>
</div>

但是，使用JavaScript可以更简单地完成

document.getElementsByClassName("con car")[0].style.background = "red";

<div class="box">
  <div class="con">1</div>
  <div class="con be">2</div>
  <div class="con car">3</div>
  <div class="con">4</div>
  <div class="con be">5</div>
  <div class="con car">6</div>
</div>

尽管仅使用CSS和HTML，但特定div的位置却在div中的许多div中，

1 个答案: