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

Question

为什么第 1、2、3、4 项没有按预期设置 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;
}