为什么按钮不想改变颜色?

Question

大家好!我有一个关于我网站上按钮的问题。为什么不变色呢?

我的代码

#html .przyciski:nth-child(1) {
color: white;
background: #04AA6D;
}
#html .przyciski:nth-child(2) {
color: black;
background: #FFF4A3;
}
#html .przyciski:nth-child(3) {
color: white;
background: #282A35;
}

<div id="container">

<div id="html">
<span style="font-size: 5.3rem;">.HTML</span><br>
<span style="font-size: 1rem;">Język do tworzenia stron internetowych</span><br><br>
<button class="przyciski">Naucz się HTML</button><br>
<button class="przyciski">Samouczek wideo</button><br>
<button class="przyciski">Dokumentacja HTML</button><br>
</div>

</div>

我只是个初学者，我不知道哪里出错了。请帮助。

Answer 1

:nth-child(n)选择器匹配父元素的第n个子元素。

所以，这意味着它选择了子元素，而不是按顺序选择元素，例如，通过使用.przyciski:nth-child(1)选择器，您将选择按钮内的第一个子元素。

你当前的CSS选择如下:

<button class="przyciski">
<div></div> <== Your current CSS is selecting this element, which doesn't exist
</button>

你可以应用的一个解决方案是将这些按钮包装在div中，就像这样:

<div class="buttons">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>

然后像这样选择这些按钮

.buttons:nth-child(1) { /* <== Selecting the "Button 1" */
color: #fdfdfd;
}
.buttons:nth-child(1) { /* <== Selecting the "Button 2" */
color: #fcfcfc;
}
.buttons:nth-child(1) { /* <== Selecting the "Button 3" */
color: #fdfdfd;
}

你可以在这里阅读更多关于nth-child()的信息