Селектор Css> + #id + путаница в синтаксисе при наведении

У меня есть несколько кнопок, и одна из них имеет другой цвет, поэтому цвет при наведении, который я выбрал для другого, не совсем подходит для этого. Поэтому я хотел создать для него #id. Вот CSS и HTML:

/!\ идентификатор, который я хотел сделать, это самый последний css в приведенном здесь коде. Я увидел путаницу в ответах, .boutonsim — это просто класс для всех кнопок, а #boutonachat — это идентификатор.

Однако 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>