css 选择器> + #id + 悬停语法混淆

Question

我有几个按钮，其中一个有不同的颜色，所以我为另一个选择的悬停颜色与那个不太匹配。因此我想为它创建一个#id

/！\我想要制作的id是这里提供的代码中的最后一个css。我在回复中看到了困惑，.butonsim只是所有按钮的类，而#boutonacht是id。

然而，id的作用为0。idk如何做语法。

.boutonsim { /*construction d'un bouton avec faux fond*/
display: block;
height: 45px;
width: 150px;
position: absolute;
top: 1.9em;
z-index: 1;
font-size: 16px;
}
.top-container > button {
display: block;
width: 150px;
height: 45px;
background-repeat: no-repeat;
background-color: rgba(255, 255, 255, 0);
color: white;
border: none;
font-family: 'CapitalisTypOasis', 'CapitalisTypOasisMedium';
font-size: 16px;
text-align: center;
z-index: 2;
position: absolute;
top: 1.9em;
padding: 0;
}

.top-container > button:hover {
color: brown;
}
.top-container > button:hover {
color: rosybrown;
}

HTML

<div class="top-container">
<img id="img2" src="images/haut.png" />
<img id="title" src="images/nom.png" />
<img id="logo" src="images/LOGO.png" />
<div class="boutonsim" style="right: 80px;" name="boutonachat"> <!--image-->
<img src="images/clipart/boutonORIGINALachat.png" /> <!--vrai bouton-->
</div>
<button id="boutonachat" style="right: 80px;">Billets</button>
<div class="boutonsim" style="right: 280px;" name="boutonculture"> <!--image-->
<img src="images/clipart/boutonORIGINAL.png" /> <!--vrai bouton-->
</div>
<button style="right: 280px;">Culture</button>
<div class="boutonsim" style="right: 480px;" name="boutonpaysages"> <!--image-->
<img src="images/clipart/boutonORIGINAL.png" /> <!--vrai bouton-->
</div>
<button style="right: 480px;">Paysages</button>
<div class="boutonsim" style="right: 680px;" name="boutonaccueil"> <!--image-->
<img src="images/clipart/boutonORIGINAL.png" /> <!--vrai bouton-->
</div>
<button style="right: 680px;">Accueil</button>
</div>

Answer 1

在CSS中调用ID时，必须使用"而不是"-用于类。

换句话说，要继续您的声明并实际看到结果，您需要写下：

#boutonachat { /*construction d'un bouton avec faux fond*/
display: block;
height: 45px;
width: 150px;
position: absolute;
top: 1.9em;
z-index: 1;
font-size: 16px;
}

颜色的内联样式：

<button style="right: 80px; background-color: red;">Billets</button>

Answer 2

如果你想应用不同的颜色，我只会用"；按钮：类型(1(的第n个：悬停"；