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