html - 如何定位嵌套类的第一个实例？

Question

我试图仅从嵌套的重复 block 中定位类“.container”的第一个实例。为清楚起见，这里是结构:

<div id="home-event-block>
  <div class="event_container">
     <div>Some Text </div>
     <div class="container">More Text </div> <!-- Target this only -->
  </div>
  <div class="event_container">
     <div>Some Text </div>
     <div class="container">More Text </div>
  </div>
  <div class="event_container">
     <div>Some Text </div>
     <div class="container">More Text </div>
  </div>
</div>

我显然可以定位“容器”的每个实例，但我对在页面上只获得“容器”的第一个实例感到茫然。想法？

Answer 1

您可以使用 :first-of-type/first-child 定位 .event_container 然后选择 container

.event_container:first-of-type .container {
  color: red
}

<div id="home-event-block">
  <div class="event_container">
    <div>Some Text </div>
    <div class="container">More Text </div>
    <!-- Target this only -->
  </div>
  <div class="event_container">
    <div>Some Text </div>
    <div class="container">More Text </div>
  </div>
  <div class="event_container">
    <div>Some Text </div>
    <div class="container">More Text </div>
  </div>
</div>

如果你想在你的 CSS 规则中更具体，你可以定位你的父 home-event-block 并使用子选择器 >

#home-event-block>.event_container:first-of-type>.container {
  color: red;
}

<div id="home-event-block">
  <div class="event_container">
    <div>Some Text </div>
    <div class="container">More Text </div>
    <!-- Target this only -->
  </div>
  <div class="event_container">
    <div>Some Text </div>
    <div class="container">More Text </div>
  </div>
  <div class="event_container">
    <div>Some Text </div>
    <div class="container">More Text </div>
  </div>
</div>

注意事项:

• 在 home-event-block
之后你错过了一个 "
• 你可以使用 :first-of-type 因为每个兄弟都是相同的元素 div 否则你不能