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

【问题标题】：Css selector > + #id + hover syntax confusionCss 选择器 > + #id + hover 语法混乱
【发布时间】：2021-03-21 09:45:56
【问题描述】：

我有几个按钮，其中一个有不同的颜色，所以我为另一个选择的悬停颜色不太适合那个。因此我想为它创建一个#id。下面是 CSS 和 HTML：

/!\ 我想要创建的 id 是此处提供的代码中的最后一个 css。我在回复中看到了混乱，.boutonsim 只是所有按钮的类，而 #boutonachat 是 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>

【问题讨论】：

标签： html css css-selectors hover

【解决方案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>

【讨论】：

不是这个，我想做的id是#boutonachat
如果你已经给类设置了背景颜色，我不建议给 ID 一个覆盖颜色；如果有任何东西将颜色从类中取出并单独分配 ID。然而，在这种情况下，仅仅应用“内联样式”来完成该特定按钮上的工作并没有什么坏处。我会更新我的答案

【解决方案2】：

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

【讨论】：