这些CSS nth-child选择器为什么没有按预期工作？

Question

为什么第一，第二，第三，第四项没有按预期的background-color设置样式？

请参见代码段：

 .list-container.animated .ui.button.bubble:nth-child(1) { background: red; } .list-container.animated .ui.button.bubble:nth-child(2) { background: green; } .list-container.animated .ui.button.bubble:nth-child(3) { background: yellow; } .list-container.animated .ui.button.bubble:nth-child(4) { background: pink; } button { outline: none; border:none; } 

 <div class="list-container animated"> <form> <label> <div class="ui button bubble medium">Item 1</div> </label> <label> <div class="ui button bubble medium">Item 2</div> </label> <label> <div class="ui button bubble medium">Item 3</div> </label> <button class="ui button bubble">Item 4</button> </form> </div> 

Answer 1

nth-child用于其父元素的直接子元素-在您的情况下，所有<div class="ui button bubble medium">元素都是其父<label>元素的独子元素。

可以仅使用button选择最后一个<button>元素，因为它是片段中该类型的唯一元素：

将规则更改为此：

.list-container.animated label:nth-child(1) .ui.button.bubble {
    background: red;
}

.list-container.animated label:nth-child(2) .ui.button.bubble {
    background: green;
}

.list-container.animated label:nth-child(3) .ui.button.bubble {
    background: yellow;
}

.list-container.animated button {
    background: pink;
}

如果您将显式层次结构与>子选择器而不是后代组合符'一起使用，则可能更容易遵循这些规则 ' （空间）：

.list-container.animated > form > label:nth-child(1) > .ui.button.bubble {
    background: red;
}

.list-container.animated > form > label:nth-child(2) > .ui.button.bubble {
    background: green;
}

.list-container.animated > form > label:nth-child(3) > .ui.button.bubble {
    background: yellow;
}

.list-container.animated > form > button {
    background: pink;
}

Answer 2

由于您选择的DIV是其label标签容器/父first-child因此每个DIV都是first-child （末尾的粉红色button除外，后者作为label s的同级子是第4个子级）共同的父.list-container ）。

您必须使用标签上的第n个子选择器，这是谎言：

 .list-container.animated label:nth-child(1) .ui.button.bubble { background: red; } .list-container.animated label:nth-child(2) .ui.button.bubble { background: green; } .list-container.animated label:nth-child(3) .ui.button.bubble { background: yellow; } .list-container.animated :nth-child(4) { outline: none; border: none; background: pink; } 

 <div class="list-container animated"> <form> <label> <div class="ui button bubble medium">Item 1</div> </label> <label> <div class="ui button bubble medium">Item 2</div> </label> <label> <div class="ui button bubble medium">Item 3</div> </label> <button class="ui button bubble">Item 4</button> </form> </div> 

Answer 3

看，您正在尝试使用.bubble类在第一，第二，第三（等等）div上设置样式。 但是每个街区只有一个孩子。 因此，您也需要计数标签而不是.bubble的div。

我建议您将按钮包装在div中并为该div分配类，并为标签提供相同的类

<div class="list-container animated">
       <form>
          <label class="some-class">
             <div class="ui button bubble medium">Item 1</div>
          </label>
          <label class="some-class">
             <div class="ui button bubble medium">Item 2</div>
          </label>
          <label class="some-class">
             <div class="ui button bubble medium">Item 3</div>
          </label>
          <div class="some-class"><button class="ui button bubble">Item 4</button></div>
       </form>
    </div>


.list-container.animated form .some-class:first-child  .ui.button.bubble {
  background: red;
}

.list-container.animated form .some-class:nth-child(2) .ui.button.bubble {
  background: green;
}

.list-container.animated form .some-class:nth-child(3) .ui.button.bubble {
  background: yellow;
}

.list-container.animated form .some-class:last-child .ui.button.bubble {
  background: pink;
}

button {
  outline: none;
  border:none;
}