Css 选择器 > + #id + hover 语法混乱

Question

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

/!\ 我想创建的 ID 是此处提供的代码中的最后一个 css。我在回复中看到了困惑，.boutonsim 只是所有按钮的 class 而 #boutonachat 是 id 东西。

但是 id 的东西有 0 个效果。我不知道如何为它做语法。

.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

如果你想应用不同的颜色，我会用“button:nth-of-type(1):hover”来引用它们

Css 选择器 > + #id + hover 语法混乱

Css selector > + #id + hover syntax confusion

html

css

hover

css-selectors