Question

为什么第1，第2，第3，第4个项目没有按预期设置为background-color？

请参阅代码段：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

如果您使用>子选择器的显式层次结构而不是后代组合符＆＃39; ＆＃39;则规则可能更容易理解。（空格）：

.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（最后粉红色button除外），作为label的兄弟姐妹，是共同父母.list-container的第4个孩子。）

你必须在标签上使用第n个孩子选择器，这就是：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

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

3 个答案: