时间戳

首页 > 解决方案 > 仅使用 CSS 和 HTML 设置特定 div 的样式，尽管它位于 div 中的许多 div 中

html - 仅使用 CSS 和 HTML 设置特定 div 的样式，尽管它位于 div 中的许多 div 中

问题描述

我想使用 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，尽管它的位置。我怎样才能做到这一点？？

标签： htmlcss

解决方案

一种可能的解决方案是使用后续兄弟组合器来定位您不想设置样式的类 ~

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

推荐阅读