如果子代有特定的类，则仅用于子代的CSS选择器

Question

我想获取一个元素是直接子元素且具有特定类的选择器。我应用于该选择器的任何样式都不应影响div.this_one的第二个实例。

<main>
<div class="this_one"></div>
<div></div>
<div class="this_one"></div>
</main>

在上面的示例中，我想要div.this_one的第一个实例的选择器

<main>
<div></div>
<div class="this_one"></div>
<div class="this_one"></div> 
</main>

在上面的示例中，所有div都不受影响，因为第一个div实际上不是此直接子代。

我希望这是有道理的。

Answer 1

您可以使用:first-child.this_one选择器来实现它：

div{
  display:inline-block;
  width:100px;
  height:100px;
  margin:10px;
  background:grey;
}

main div:first-child.this_one{
  background:teal;
}

<main>
<div class="this_one"></div>
<div></div>
<div class="this_one"></div>
</main>

<main>
<div></div>
<div class="this_one"></div>
<div class="this_one"></div> 
</main>

Answer 2

.this_one:first-child {
  color: blue;
}

<div>
  <div class="this_one">This</div>
  <div>Not this</div>
  <div class="this_one">Or this</div>
</div>
<hr>
<div>
  <div>NOT</div>
  <div class="this_one">Or This</div>
  <div>NOT</div>
  <div class="this_one">Or this</div>
</div>

Answer 3

只需选择first-child ...

.this_one:first-child {
  color: red;
}

<div>
  <div class="this_one">This</div>
  <div>Not this</div>
  <div class="this_one">Or this</div>
</div>
<hr>
<div>
  <div>Not this</div>
  <div class="this_one">Or This</div>
  <div>Or this</div>
  <div class="this_one">Or this</div>
</div>