#id 是否覆盖 :hover 更改？

【问题标题】：Does #id override the :hover change?#id 是否覆盖 :hover 更改？
【发布时间】：2022-02-14 15:43:40
【问题描述】：

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

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

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>

【问题讨论】：

  • 如果我正确理解您的问题，button:hover 选择器无法正常工作，因为#submit 具有更高的优先级，而且它还应用了自己的背景颜色，因此悬停不是工作。这称为“CSS 特定性”，您可以在此处找到更多信息 w3schools.com/css/css_specificity.asp 或在线搜索。
  • 读了一会儿之后，我意识到你可以为一个元素分配多个类，这就解决了！如果我能给你代表我会的！谢谢！！
  • 嘿没问题，很高兴它成功了。

标签： javascript html css button


【解决方案1】：

问题 - ID 是否覆盖 :hover 更改？

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

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

回答 - 不，您不需要重新格式化所有按钮，因为您可以在按钮上使用 !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>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-12-20
    • 2015-07-22
    • 2023-03-28
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode