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

要在船只div内获得红色按钮，您可以使用选择器：

.parent > .boat > .test {
}

Answer 2

您可以使用:only-child选择器：

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

Selector解释道：

.parent - 从您的父母开始
> .boat:only-child大于（>）表示直接孩子，这意味着.boat必须是.parent的直接孩子，并且是唯一的孩子（这是{ {1}}位）
:only-child这意味着> .test:only-child必须是.test的直接孩子，并且是唯一的孩子

第二个选择器是可选的 - 如果你只有一个没有船div的按钮

More info on only-child

More info on direct child

CSS选择器用于选择父级层次结构中的子级

2 个答案: