CSS選擇器以選擇父級層次結構中的子級

Question

如果使用CSS選擇器，則我想將按鈕的背景設置為紅色（如果它是.parent類層次結構中唯一的按鈕）。

我嘗試了下面的選擇器，但是如果按鈕的兄弟位於div內則失敗。

<style> 
.parent  .test:only-of-type {
    background: red;
}
</style>

情況1：沒有按鈕應標記為紅色 （在這種情況下選擇器失敗）

 <div class="parent">
      <div class="boat">
        <button class="test">This is a paragraph.</button>
      </div>
      <button class="test">This is a paragraph.</button>
     <button class="test">This is a paragraph.</button>
      <div class="other">
        <button class="test">This is a paragraph.</button>
      </div>
    </div>
 </div>

情況2：按鈕應標記為紅色

 <div class="parent">
      <div class="boat">
        <button class="test">This is a paragraph.</button>
      </div>
   </div>
 </div>

情況3：不應將任何按鈕標記為紅色 （在這種情況下選擇器將失敗）

 <div class="parent">
      <div class="boat">
        <button class="test">This is a paragraph.</button>
      </div>
      <div class="other">
        <button class="test">This is a paragraph.</button>
      </div>
    </div>
 </div>

Answer 1

要使Boat div內部的按鈕變為紅色，可以使用選擇器：

.parent > .boat > .test {
}

Answer 2

您可以使用:only-child選擇器：

 .parent > .boat:only-child > .test:only-child, .parent > .test:only-child { color: red; } 

 <div class="parent"> <div class="boat"> <button class="test">not red.</button> </div> <div class="other"> <button class="test">not red.</button> </div> </div> <div class="parent"> <div class="boat"> <button class="test">not red.</button> </div> <button class="test">not red.</button> <button class="test">not red.</button> <div class="other"> <button class="test">not red.</button> </div> </div> <div class="parent"> <div class="boat"> <button class="test">red.</button> </div> </div> 

更新

選擇器說明：

• .parent從您的父母開始
• > .boat:only-child大於（ > ）表示直接子代，因此這意味着.boat必須是.boat的直接.parent且是唯一子代（這是:only-child位）
• > .test:only-child再次是> .test:only-child ，這意味着.test必須是.boat的直接子代，並且是唯一子代

第二個選擇器是可選的-如果您只有一個按鈕而沒有Boat div

有關獨生子女的更多信息

有關直子的更多信息