Html 为什么不'；这些CSS第n个子选择器是否按预期工作？

为什么第一、第二、第三、第四项没有按预期使用背景色设计

请参阅代码片段：

.list-container.animated.ui.button.bubble:n子项（1）{
背景：红色；
}
.list-container.animated.ui.button.bubble:第n个子项（2）{
背景：绿色；
}
.list-container.animated.ui.button.bubble:第n个子项（3）{
背景：黄色；
}
.list-container.animated.ui.button.bubble:第n个子项（4）{
背景：粉红色；
}
钮扣{
大纲：无；
边界：无；
}

项目1
项目2
项目3
项目4

第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 button {
    background: pink;
}

如果将显式继承权与
子选择器一起使用，而不是后代组合符“
”（空格），则规则可能更容易遵循：

因为您选择的div是其
标签
标记容器/父项的子项，并且每个div都是
第一个子项
（因此，除了末尾的粉红色
按钮
，它作为
标签
的同级，是公共父项
列表容器
的第四个子项）

您必须使用标签上的第n个子选择器，如下所示：


.list-container.animated标签：第n个子项（1）.ui.button.bubble{
背景：红色；
}
.list-container.animated标签：第n个子项（2）.ui.button.bubble{
背景：绿色；
}
.list-container.animated标签：第n个子项（3）.ui.button.bubble{
背景：黄色；
}
.list-container.animated:第n个子项（4）{
大纲：无；
边界：无；
背景：粉红色；
}

项目1
项目2
项目3
项目4
看，您正试图使用.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;
}


项目1
项目2
项目3
项目4
.list-container.animated form.some类：first child.ui.button.bubble{
背景：红色；
}
.list-container.animated form.some类：第n个子类（2）.ui.button.bubble{
背景：绿色；
}
.list-container.animated form.some类：第n个子类（3）.ui.button.bubble{
背景：黄色；
}
.list-container.animated form.some类：last child.ui.button.bubble{
背景：粉红色；
}
钮扣{
大纲：无；
边界：无；
}
除了第四个按钮之外，他们都是他们父母的第一个孩子。你试过先搜索吗？您的问题或类似问题可能已经得到了回答：这很好，但请注意，
并没有包装在标签标签中。这就是上面的问题所在…@anaprentice我已经修改了我的答案。这很好，但请注意，
并没有包装在标签标签中。这就是上面的问题所在…这就是为什么我在上面使用了不同的CSS。什么坏了？谢谢，但我需要按钮的动态样式。。。我在这里使用颜色来保持问题的简单性。实际上，我使用的不是这样：
.generate list container animation delays（@n，@I:0）当（@I=<@n）{.list-container.animated.ui.button.bubble:n子（@I}）{animation delay:unit（@initalDelay+（@I*.03），s）；}.generate list container animation delays（@n，（@I+1））；}
我不知道你的意思，但您也可以将此选择器用于按钮：
.list-container.animated:nth child（4）{…}
（我现在也将其放在我的答案片段中）您可以将一个类放在标签上，然后将该按钮与标签赋予相同的类？然后您将使用.class\u name:nth child（n）而不是label:nth child（3）
<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;
}