#id 是否覆盖 :hover 更改？

Does #id override the :hover change?

我见过不同的类似答案，但 none 我正在处理的嵌套级别。我有两组按钮，圆形按钮和矩形按钮，我希望悬停时背景变为白色。我唯一能够成功更改的是矩形的文本颜色。

我以前有内联按钮样式，我认为这是问题所在。猜不着：/

ID 是否会覆盖 :hover 更改？如果是这样，我需要重新格式化我所有的按钮吗？谢谢！

（以前的代码解决方案涉及jquery，我对此一无所知）

/*
    CS 81 Final - Noah Derby
*/

//Global Variables
"use strict";
let gameActive = false;
let dealerValue = 0;
let playerValue = 0;
let buttons = document.getElementsByTagName('button');
let totalAmount = document.getElementById('betAmount');
let bank = document.getElementById('bank');


//Card Functions and
function Card(value, name, suit) {
    this.value = value;
    this.name = name
    this.suit = suit
}

function newDeck() {
    let suits = ['Hearts','Diamonds','Spades','Clubs'];
    let names = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
    let deck = []
    for(let i of suits) {
        for(let n=0; n < names.length; n++) {
            deck.push(new Card(n+1, names[n], i));
        }
    }

    for (let i = deck.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        const temp = deck[i];
        deck[i] = deck[j];
        deck[j] = temp;
    }
    return deck;
}

function addTo(player, card){
    let ascii_char;
    let div = document.createElement('card');
    div.className = 'card';

    if(card.suit === 'Diamonds'){
        ascii_char = "&diams;";
        div.style.color = 'red';
    } else if (card.suit === 'Hearts') {
        ascii_char = '&hearts;'
        div.style.color = 'red';
    } else {
        ascii_char = "&" + card.suit.toLowerCase() + ";"
    }

    div.innerHTML = "<span class='number'>" + card.name + "</span><span class='suit'>" + ascii_char + "</span>";

    if(player.id === "dealerTotal"){
        document.querySelector(".dealerCards").appendChild(div);
    } else {
        document.querySelector(".playerCards").appendChild(div);
    }

    if (card.value > 10){
        player.value = parseInt(player.value, 10) + 10;
    } else if (card.value === 1) {
        let handValue = parseInt(player.value, 10);
        if(handValue <= 10) {
            player.value = handValue + 11
        } else {
            player.value = handValue + 1
        }
    } else {
        player.value = parseInt(player.value, 10) + card.value;
    }
}

function clearCards() {
    document.querySelector(".dealerCards").innerHTML = "";
    document.querySelector(".playerCards").innerHTML = "";
}


//Button Handlers
for (let i=0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', () => {
        let playerTotal = document.getElementById("playerTotal");
        let dealerTotal = document.getElementById("dealerTotal");
        let bankValue = parseInt(bank.value, 10);
        let amountValue = parseInt(totalAmount.value, 10);
        let cards = newDeck();

        switch (buttons[i].id) {
            case "one":
                if(!gameActive){
                    totalAmount.value = parseInt(totalAmount.value, 10) + 1;
                    break;
                }
                break;
            case "five":
                if(!gameActive){
                    totalAmount.value = parseInt(totalAmount.value, 10) + 5;
                    break;
                }
                break;
            case "ten":
                if(!gameActive){
                    totalAmount.value = parseInt(totalAmount.value, 10) + 10;
                    break;
                }
                break;
            case "twentyfive":
                if(!gameActive){
                    totalAmount.value = parseInt(totalAmount.value, 10) + 25;
                    break;
                }
                break;
            case "hundred":
                if(!gameActive){
                    totalAmount.value = parseInt(totalAmount.value, 10) + 100;
                    break;
                }
                break
            case "fivehundred":
                if(!gameActive){
                    totalAmount.value = parseInt(totalAmount.value, 10) + 500;
                    break;
                }
                break;
            case "thousand":
                if(!gameActive){
                    totalAmount.value = parseInt(totalAmount.value, 10) + 1000;
                    break;
                }
                break;
            case "reset":
                if (!gameActive){
                    totalAmount.value = 0;
                    break;
                }
                break;
            case "submit":
                if(!gameActive){
                    if (bankValue === 0) {
                        alert("No funds available :(");
                        break;
                    } else if (amountValue === 0) {
                        alert("Please Enter a valid amount")
                        break;
                    } else if(amountValue > bankValue){
                        totalAmount.value = bank.value;
                        bank.value = 0;
                    } else{
                        bank.value = bankValue - amountValue;
                    }
                    clearCards();
                    playerTotal.value = dealerTotal.value = '0';
                    addTo(playerTotal, cards.pop());
                    addTo(playerTotal, cards.pop());
                    addTo(dealerTotal, cards.pop());

                    dealerTotal.style.color = "transparent";
                    gameActive = true;
                    break;
                }
                break;
            case "hit":
                if(gameActive) {
                    addTo(playerTotal, cards.pop())
                    if(parseInt(playerTotal.value, 10) > 21){
                        alert(`You lost $${amountValue} :( \n Submit another bet to play again!`);
                        dealerTotal.style.color = "black";
                        totalAmount.value= '0';
                        gameActive = false;
                        break;
                    }
                }
                break;
            case 'stand':
                if (gameActive) {
                    playerValue = parseInt(playerTotal.value, 10);
                    while(parseInt(dealerTotal.value, 10) <= 17){
                        addTo(dealerTotal, cards.pop());
                    }
                    dealerValue = parseInt(dealerTotal.value, 10);
                    if (dealerValue > 21){
                        alert(`You won $${amountValue*2}!!!`);
                        bank.value = bankValue + amountValue * 2;
                        totalAmount.value = 0;
                        gameActive = false;
                        dealerTotal.style.color = "black";
                        break;
                    }

                    if (playerValue < dealerValue) {
                        alert(`You lost $${amountValue} :( \n Submit another bet to play again!`);
                        totalAmount.value= '0';
                    } else if (playerValue > dealerValue) {
                        alert(`You won $${amountValue*2}!!!`);
                        bank.value = bankValue + amountValue * 2;
                        totalAmount.value = '0';
                    } else {
                        alert(`Its a tie! Funds refunded!`);
                        bank.value = bankValue + amountValue;
                        totalAmount.value= '0';
                    }
                    dealerTotal.style.color = "black";
                    gameActive = false;
                }
                break;
        }
    }, false)
}

/*   CS 81 Final - Noah Derby   */

body {
    background-image: url('https://cdn.hipwallpaper.com/i/46/65/hEiUkp.jpg');
    background-size: cover;
    font-family: Verdana, sans-serif, bold;
    font-weight: bold;
    margin: 5px;
}

header {
    text-align: center;
    font-size: 50px;
    margin: 50px 500px -50px;
}

label{
    font-size: 25px;
}

input{
    font-size: 25px;
    color: black;
    background-color: white;
}

div {
    margin: 5px;
}

.economyWrap{
    position: relative;
    float: left;
    width: 480px;
    height: 500px;
    top: 100px;
    left: 50px;
}

.playWrap{
    position: relative;
    border: 5px solid black;
    float: left;
    top: 100px;
    width: 260px;
    height: 300px;
    margin-left: 140px;
}

.textContainer{
    padding: 5px;
    background: rgba(0, 128, 0, 0.02);
    margin: 200px 0 0 125px;
    width: 400px;
    float: left;
}

.playButtonContainer{
    position: absolute;
    margin: 17px;
    bottom:-90px;
}

.earningsContainer{
    position: absolute;
    width: 450px;
    height: 35px;
    padding: 5px;
    top:0;
    left:85px;
}

.submitContainer {
    margin: auto;
    position: absolute;
    width: 340px;
    bottom: 220px;
    left: 120px;
}

.chipContainer{
    margin: auto;
    position: absolute;
    height: 210px;
    width: 250px;
    left: 140px;
    bottom: 0;
}

/*
    Buttons
*/

button.chip{
    display: inline-block;
    text-align: center;
    font-family: "Verdana", sans-serif;
    font-size: 15px;
    font-weight: bold;
    border-radius: 50%;
    height: 52px;
    width: 52px;
    margin: 5px;
    cursor: pointer;
    transition-duration: .5s;
}

#one {
    background-color: rgba(34,31,32,0.95);
    color:white;
    border: 5px solid rgba(209,212,213,0.95);
}

#five {
    background-color: rgba(242,122,128,0.95);
    color: rgba(148,30,28,0.95);
    border: 5px solid rgba(235,53,45,0.95);
}

#ten {
    background-color: rgba(169,219,203,0.95);
    color: rgba(13,45,76,0.95);
    border: 5px solid rgba(3,90,136,0.95);
}

#twentyfive {
    background-color: rgba(235,232,64,0.95);
    color: rgba(51,123,18,0.95);
    border: 5px solid rgba(57,134,63,0.95);
}

#hundred {
    background-color: #fdf049;
    color: rgb(235,53,45);
    border: 5px solid rgb(235,53,45);
}

#fivehundred {
    background-color: #b6b0d5;
    color: rgb(71,45,126);
    border: 5px solid rgb(126,70,155);
}

#thousand {
    background-color: #fffef6;
    color: rgb(34,31,31);
    border: 5px solid #59585a;
}

button.bet {
    display: inline-block;
    border-radius: 10px;
    border: 4px solid saddlebrown;
    text-align: center;
    font-family: "Verdana", sans-serif;
    font-size: 14px;
    font-weight: bold;
    height: 50px;
    width: 100px;
    margin: 5px;
    cursor: pointer;
    transition-duration: .5s;
}

#submit {
    background-color: #358535;
}

#reset {
    background-color: yellow;
}

#hit {
    background-color: lightcoral;
}

#stand {
    background-color: lightgreen;
}


.card{
    background-color: white;
    width:40px;
    height:60px;
    border:1px solid #151718;
    float:left;
    border-radius:2px;
}

.number, .suit{
    width:100%;
    display:block;
    text-align:center;
    padding-top:8px;
}

button:hover {
    background-color: white;
}

<!DOCTYPE html>
<html lang="en">

<!-- CS 81 Final Project - Noah Derby-->
<!-- A simple blackjack game. I hope you enjoy!!!!!!-->

<head>
    <meta charset="UTF-8">
    <title>Blackjack!</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<header>Blackjack!</header>
<div class="economyWrap">
    <div class="earningsContainer">
        <label for="bank" style="font-size: 25px;">Your Balance is: $ </label><input type="number" id="bank" value="1000" style="width: 100px;" disabled>
    </div>
    <div class="chipContainer">
        <button id="one" class="chip">1</button>
        <button id="five" class="chip">5</button>
        <button id="ten" class="chip" >10</button>
        <button id="twentyfive" class="chip">25</button>
        <button id="hundred" class="chip">100</button>
        <button id="fivehundred" class="chip">500</button>
        <button id="thousand" class="chip">1k</button>
    </div>
    <div class="submitContainer">
        <label for="betAmount" style="font-size: 25px;">Bet Amount: $ </label><input type="number" id="betAmount" value="0" style="margin:5px; width: 100px;" disabled>
        <button id="reset" class="bet">Reset</button>
        <button id="submit" class="bet">Submit</button>
    </div>
</div>

<div class="playWrap">
    <div class="dealerContainer">
        <label for="dealerTotal">Dealer Total: </label><input value="0" id="dealerTotal" style=" width: 50px;" disabled>
        <div class="dealerCards"></div>
    </div>
    <div class="playerContainer" style="position: absolute; bottom:0;">
        <label for="playerTotal">Your Total: </label><input value="0" id="playerTotal" style="bottom:0; width: 50px;" disabled>
        <div class="playerCards"></div>
    </div>
    <div class="playButtonContainer">
        <button class="bet" id="hit" style="background-color: lightgreen;">Hit</button>
        <button class="bet" id="stand" style="background-color: lightcoral;">Stand</button>
    </div>
</div>

<div class="textContainer">
    <h2>Welcome to Blackjack!</h2>
    <h4>
        To start, click the corresponding chips to place your bets and click "Submit" to start the game!
        The goal is to reach 21, so you can decide to either hit (gain another card) or stand (wait for the dealer).
        Whoever is closer to 21 without going over wins!
    </h4>
</div>

</body>
<script src="main.js"></script>

</html>

问题 - ID 是否覆盖了 :hover 的变化？

回答 - a:hover 的样式规则将覆盖该段落，只要它写在 p 或 #id 规则之后的 CSS 中。 问题在于处理您的 :hover 行为的选择器的特异性低于默认行为的规则（p#id 选择器）。

问题 - 如果是这样，我需要重新格式化我所有的按钮吗？

回答 - 不，您不需要重新格式化所有按钮，因为您可以在 [=44 上使用 !important =] 在 CSS 文件中。

/*
    CS 81 Final - Noah Derby
*/

//Global Variables
"use strict";
let gameActive = false;
let dealerValue = 0;
let playerValue = 0;
let buttons = document.getElementsByTagName('button');
let totalAmount = document.getElementById('betAmount');
let bank = document.getElementById('bank');


//Card Functions and
function Card(value, name, suit) {
    this.value = value;
    this.name = name
    this.suit = suit
}

function newDeck() {
    let suits = ['Hearts','Diamonds','Spades','Clubs'];
    let names = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
    let deck = []
    for(let i of suits) {
        for(let n=0; n < names.length; n++) {
            deck.push(new Card(n+1, names[n], i));
        }
    }

    for (let i = deck.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        const temp = deck[i];
        deck[i] = deck[j];
        deck[j] = temp;
    }
    return deck;
}

function addTo(player, card){
    let ascii_char;
    let div = document.createElement('card');
    div.className = 'card';

    if(card.suit === 'Diamonds'){
        ascii_char = "&diams;";
        div.style.color = 'red';
    } else if (card.suit === 'Hearts') {
        ascii_char = '&hearts;'
        div.style.color = 'red';
    } else {
        ascii_char = "&" + card.suit.toLowerCase() + ";"
    }

    div.innerHTML = "<span class='number'>" + card.name + "</span><span class='suit'>" + ascii_char + "</span>";

    if(player.id === "dealerTotal"){
        document.querySelector(".dealerCards").appendChild(div);
    } else {
        document.querySelector(".playerCards").appendChild(div);
    }

    if (card.value > 10){
        player.value = parseInt(player.value, 10) + 10;
    } else if (card.value === 1) {
        let handValue = parseInt(player.value, 10);
        if(handValue <= 10) {
            player.value = handValue + 11
        } else {
            player.value = handValue + 1
        }
    } else {
        player.value = parseInt(player.value, 10) + card.value;
    }
}

function clearCards() {
    document.querySelector(".dealerCards").innerHTML = "";
    document.querySelector(".playerCards").innerHTML = "";
}


//Button Handlers
for (let i=0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', () => {
        let playerTotal = document.getElementById("playerTotal");
        let dealerTotal = document.getElementById("dealerTotal");
        let bankValue = parseInt(bank.value, 10);
        let amountValue = parseInt(totalAmount.value, 10);
        let cards = newDeck();

        switch (buttons[i].id) {
            case "one":
                if(!gameActive){
                    totalAmount.value = parseInt(totalAmount.value, 10) + 1;
                    break;
                }
                break;
            case "five":
                if(!gameActive){
                    totalAmount.value = parseInt(totalAmount.value, 10) + 5;
                    break;
                }
                break;
            case "ten":
                if(!gameActive){
                    totalAmount.value = parseInt(totalAmount.value, 10) + 10;
                    break;
                }
                break;
            case "twentyfive":
                if(!gameActive){
                    totalAmount.value = parseInt(totalAmount.value, 10) + 25;
                    break;
                }
                break;
            case "hundred":
                if(!gameActive){
                    totalAmount.value = parseInt(totalAmount.value, 10) + 100;
                    break;
                }
                break
            case "fivehundred":
                if(!gameActive){
                    totalAmount.value = parseInt(totalAmount.value, 10) + 500;
                    break;
                }
                break;
            case "thousand":
                if(!gameActive){
                    totalAmount.value = parseInt(totalAmount.value, 10) + 1000;
                    break;
                }
                break;
            case "reset":
                if (!gameActive){
                    totalAmount.value = 0;
                    break;
                }
                break;
            case "submit":
                if(!gameActive){
                    if (bankValue === 0) {
                        alert("No funds available :(");
                        break;
                    } else if (amountValue === 0) {
                        alert("Please Enter a valid amount")
                        break;
                    } else if(amountValue > bankValue){
                        totalAmount.value = bank.value;
                        bank.value = 0;
                    } else{
                        bank.value = bankValue - amountValue;
                    }
                    clearCards();
                    playerTotal.value = dealerTotal.value = '0';
                    addTo(playerTotal, cards.pop());
                    addTo(playerTotal, cards.pop());
                    addTo(dealerTotal, cards.pop());

                    dealerTotal.style.color = "transparent";
                    gameActive = true;
                    break;
                }
                break;
            case "hit":
                if(gameActive) {
                    addTo(playerTotal, cards.pop())
                    if(parseInt(playerTotal.value, 10) > 21){
                        alert(`You lost $${amountValue} :( \n Submit another bet to play again!`);
                        dealerTotal.style.color = "black";
                        totalAmount.value= '0';
                        gameActive = false;
                        break;
                    }
                }
                break;
            case 'stand':
                if (gameActive) {
                    playerValue = parseInt(playerTotal.value, 10);
                    while(parseInt(dealerTotal.value, 10) <= 17){
                        addTo(dealerTotal, cards.pop());
                    }
                    dealerValue = parseInt(dealerTotal.value, 10);
                    if (dealerValue > 21){
                        alert(`You won $${amountValue*2}!!!`);
                        bank.value = bankValue + amountValue * 2;
                        totalAmount.value = 0;
                        gameActive = false;
                        dealerTotal.style.color = "black";
                        break;
                    }

                    if (playerValue < dealerValue) {
                        alert(`You lost $${amountValue} :( \n Submit another bet to play again!`);
                        totalAmount.value= '0';
                    } else if (playerValue > dealerValue) {
                        alert(`You won $${amountValue*2}!!!`);
                        bank.value = bankValue + amountValue * 2;
                        totalAmount.value = '0';
                    } else {
                        alert(`Its a tie! Funds refunded!`);
                        bank.value = bankValue + amountValue;
                        totalAmount.value= '0';
                    }
                    dealerTotal.style.color = "black";
                    gameActive = false;
                }
                break;
        }
    }, false)
}

/*   CS 81 Final - Noah Derby   */

body {
    background-image: url('https://cdn.hipwallpaper.com/i/46/65/hEiUkp.jpg');
    background-size: cover;
    font-family: Verdana, sans-serif, bold;
    font-weight: bold;
    margin: 5px;
}

header {
    text-align: center;
    font-size: 50px;
    margin: 50px 500px -50px;
}

label{
    font-size: 25px;
}

input{
    font-size: 25px;
    color: black;
    background-color: white;
}

div {
    margin: 5px;
}

.economyWrap{
    position: relative;
    float: left;
    width: 480px;
    height: 500px;
    top: 100px;
    left: 50px;
}

.playWrap{
    position: relative;
    border: 5px solid black;
    float: left;
    top: 100px;
    width: 260px;
    height: 300px;
    margin-left: 140px;
}

.textContainer{
    padding: 5px;
    background: rgba(0, 128, 0, 0.02);
    margin: 200px 0 0 125px;
    width: 400px;
    float: left;
}

.playButtonContainer{
    position: absolute;
    margin: 17px;
    bottom:-90px;
}

.earningsContainer{
    position: absolute;
    width: 450px;
    height: 35px;
    padding: 5px;
    top:0;
    left:85px;
}

.submitContainer {
    margin: auto;
    position: absolute;
    width: 340px;
    bottom: 220px;
    left: 120px;
}

.chipContainer{
    margin: auto;
    position: absolute;
    height: 210px;
    width: 250px;
    left: 140px;
    bottom: 0;
}

/*
    Buttons
*/

button.chip{
    display: inline-block;
    text-align: center;
    font-family: "Verdana", sans-serif;
    font-size: 15px;
    font-weight: bold;
    border-radius: 50%;
    height: 52px;
    width: 52px;
    margin: 5px;
    cursor: pointer;
    transition-duration: .5s;
}

#one {
    background-color: rgba(34,31,32,0.95);
    color:white;
    border: 5px solid rgba(209,212,213,0.95);
}

#five {
    background-color: rgba(242,122,128,0.95);
    color: rgba(148,30,28,0.95);
    border: 5px solid rgba(235,53,45,0.95);
}

#ten {
    background-color: rgba(169,219,203,0.95);
    color: rgba(13,45,76,0.95);
    border: 5px solid rgba(3,90,136,0.95);
}

#twentyfive {
    background-color: rgba(235,232,64,0.95);
    color: rgba(51,123,18,0.95);
    border: 5px solid rgba(57,134,63,0.95);
}

#hundred {
    background-color: #fdf049;
    color: rgb(235,53,45);
    border: 5px solid rgb(235,53,45);
}

#fivehundred {
    background-color: #b6b0d5;
    color: rgb(71,45,126);
    border: 5px solid rgb(126,70,155);
}

#thousand {
    background-color: #fffef6;
    color: rgb(34,31,31);
    border: 5px solid #59585a;
}

button.bet {
    display: inline-block;
    border-radius: 10px;
    border: 4px solid saddlebrown;
    text-align: center;
    font-family: "Verdana", sans-serif;
    font-size: 14px;
    font-weight: bold;
    height: 50px;
    width: 100px;
    margin: 5px;
    cursor: pointer;
    transition-duration: .5s;
}

#submit {
    background-color: #358535;
}

#reset {
    background-color: yellow;
}

#hit {
    background-color: lightcoral;
}

#stand {
    background-color: lightgreen;
}


.card{
    background-color: white;
    width:40px;
    height:60px;
    border:1px solid #151718;
    float:left;
    border-radius:2px;
}

.number, .suit{
    width:100%;
    display:block;
    text-align:center;
    padding-top:8px;
}

button:hover {
    background-color: white !important;
}

<!DOCTYPE html>
<html lang="en">

<!-- CS 81 Final Project - Noah Derby-->
<!-- A simple blackjack game. I hope you enjoy!!!!!!-->

<head>
    <meta charset="UTF-8">
    <title>Blackjack!</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<header>Blackjack!</header>
<div class="economyWrap">
    <div class="earningsContainer">
        <label for="bank" style="font-size: 25px;">Your Balance is: $ </label><input type="number" id="bank" value="1000" style="width: 100px;" disabled>
    </div>
    <div class="chipContainer">
        <button id="one" class="chip">1</button>
        <button id="five" class="chip">5</button>
        <button id="ten" class="chip" >10</button>
        <button id="twentyfive" class="chip">25</button>
        <button id="hundred" class="chip">100</button>
        <button id="fivehundred" class="chip">500</button>
        <button id="thousand" class="chip">1k</button>
    </div>
    <div class="submitContainer">
        <label for="betAmount" style="font-size: 25px;">Bet Amount: $ </label><input type="number" id="betAmount" value="0" style="margin:5px; width: 100px;" disabled>
        <button id="reset" class="bet">Reset</button>
        <button id="submit" class="bet">Submit</button>
    </div>
</div>

<div class="playWrap">
    <div class="dealerContainer">
        <label for="dealerTotal">Dealer Total: </label><input value="0" id="dealerTotal" style=" width: 50px;" disabled>
        <div class="dealerCards"></div>
    </div>
    <div class="playerContainer" style="position: absolute; bottom:0;">
        <label for="playerTotal">Your Total: </label><input value="0" id="playerTotal" style="bottom:0; width: 50px;" disabled>
        <div class="playerCards"></div>
    </div>
    <div class="playButtonContainer">
        <button class="bet" id="hit" style="background-color: lightgreen;">Hit</button>
        <button class="bet" id="stand" style="background-color: lightcoral;">Stand</button>
    </div>
</div>

<div class="textContainer">
    <h2>Welcome to Blackjack!</h2>
    <h4>
        To start, click the corresponding chips to place your bets and click "Submit" to start the game!
        The goal is to reach 21, so you can decide to either hit (gain another card) or stand (wait for the dealer).
        Whoever is closer to 21 without going over wins!
    </h4>
</div>

</body>
<script src="main.js"></script>

</html>