Chrome浏览器中Internal CSS样式未应用至HTML页面的求助

你的问题核心原因是CSS代码没有正确嵌入到HTML文档的内部样式表结构中。浏览器只会识别放在<head>标签内<style>标签里的内部CSS，你目前的代码是把CSS、JS、HTML分开存放，没有按规范整合，导致浏览器无法读取这些样式。

修复步骤： #

1. 在HTML文档的<head>区域添加<style>标签，把所有CSS代码粘贴进去。
2. 将JS代码用<script>标签包裹，放在HTML文档的</body>结束标签之前，确保DOM加载完成后再执行JS逻辑。

修正后的完整代码： #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stock Market Simulator</title>
    <style>
        body {
            font-family: 'Roboto Mono', monospace;
            color: #fff;
            background-color: #000;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        h1 {
            margin: 0;
            font-size: 36px;
        }

        section {
            padding: 20px;
            background-color: #222;
            margin: 20px auto;
            max-width: 600px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        h2 {
            margin-top: 0;
            font-size: 24px;
            color: #fff;
        }

        form {
            max-width: 400px;
            margin: 0 auto;
        }

        label {
            margin-bottom: 10px;
            font-size: 16px;
            display: block;
        }

        input[type="text"],
        input[type="number"],
        button {
            margin-bottom: 20px;
            padding: 12px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #333;
            color: #fff;
            transition: border-color 0.3s ease;
            width: 100%;
            box-sizing: border-box;
        }

        input[type="text"]:focus,
        input[type="number"]:focus,
        button:focus {
            outline: none;
            border-color: #007bff;
        }

        button {
            cursor: pointer;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 12px 20px;
            font-size: 18px;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        #stockList {
            list-style: none;
            padding: 0;
        }

        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 20px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>Stock Market Simulator</h1>
        <p>Your Balance: $<span id="balance">10000</span></p>
    </header>

    <section id="buySection">
        <h2>Buy Stocks</h2>
        <form id="buyForm">
            <label for="stockInput">Stock Symbol:</label>
            <input type="text" id="stockInput" placeholder="Enter Stock Symbol" required>
            <label for="quantityInput">Quantity:</label>
            <input type="number" id="quantityInput" placeholder="Quantity" required>
            <button type="submit">Buy</button>
        </form>
    </section>

    <section id="stockListSection">
        <h2>Your Stocks</h2>
        <ul id="stockList">
            <!-- Bought stocks will be displayed here dynamically -->
        </ul>
    </section>

    <section id="sellSection">
        <h2>Sell Stocks</h2>
        <form id="sellForm">
            <label for="sellStockInput">Select Stock:</label>
            <select id="sellStockInput" required></select>
            <label for="sellQuantityInput">Quantity:</label>
            <input type="number" id="sellQuantityInput" placeholder="Quantity" required>
            <button type="submit">Sell</button>
        </form>
    </section>

    <footer>
        <p>&copy; 2024 Stock Market Simulator</p>
    </footer>

    <script>
        let balance = 10000;
        let stocks = [];

        async function getStockPrice(symbol) {
            try {
                const apiKey = 'YOUR_API_KEY';
                const response = await fetch(`https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=${apiKey}`);
                const data = await response.json();
                
                const latestPrice = parseFloat(data['Global Quote']['05. price']);
                return latestPrice;
            } catch (error) {
                console.error('Error fetching stock price:', error);
                return null;
            }
        }

        function buyStock(event) {
            event.preventDefault();
            const stockSymbol = document.getElementById("stockInput").value.toUpperCase();
            const quantity = parseInt(document.getElementById("quantityInput").value);

            getStockPrice(stockSymbol).then(stockPrice => {
                if (!stockPrice) {
                    alert("Failed to fetch stock price, please check the symbol or API key.");
                    return;
                }
                const totalCost = stockPrice * quantity;

                if (totalCost <= balance) {
                    balance -= totalCost;
                    updateBalance();
                    updateStockList(stockSymbol, quantity, stockPrice);
                    populateSellDropdown();
                } else {
                    alert("Insufficient balance!");
                }
            });
        }

        function sellStock(event) {
            event.preventDefault();
            const stockSymbol = document.getElementById("sellStockInput").value.toUpperCase();
            const quantity = parseInt(document.getElementById("sellQuantityInput").value);

            const stockIndex = findStockIndex(stockSymbol);

            if (stockIndex !== -1 && quantity <= stocks[stockIndex].quantity) {
                getStockPrice(stocks[stockIndex].symbol).then(stockPrice => {
                    if (!stockPrice) {
                        alert("Failed to fetch stock price, please try again later.");
                        return;
                    }
                    const totalSaleAmount = stockPrice * quantity;

                    balance += totalSaleAmount;
                    updateBalance();
                    updateStockListAfterSale(stockIndex, quantity);
                    populateSellDropdown();
                });
            } else {
                alert("You either entered an invalid stock symbol or don't have enough stocks to sell!");
            }
        }

        function updateBalance() {
            document.getElementById("balance").innerText = balance.toFixed(2);
        }

        function updateStockList(symbol, quantity, price) {
            const stockList = document.getElementById("stockList");
            const listItem = document.createElement("li");
            listItem.textContent = `${quantity} shares of ${symbol} at $${price.toFixed(2)} each`;
            stockList.appendChild(listItem);

            stocks.push({ symbol: symbol, quantity: quantity, price: price });
        }

        function updateStockListAfterSale(stockIndex, quantitySold) {
            const stockList = document.getElementById("stockList");
            const stockItem = stockList.childNodes[stockIndex];
            const currentQuantity = stocks[stockIndex].quantity;

            if (quantitySold === currentQuantity) {
                stockList.removeChild(stockItem);
                stocks.splice(stockIndex, 1);
            } else {
                stocks[stockIndex].quantity -= quantitySold;
                stockItem.textContent = `${stocks[stockIndex].quantity} shares of ${stocks[stockIndex].symbol} at $${stocks[stockIndex].price.toFixed(2)} each`;
            }
        }

        function populateSellDropdown() {
            const sellDropdown = document.getElementById("sellStockInput");
            sellDropdown.innerHTML = "";

            stocks.forEach((stock, index) => {
                const option = document.createElement("option");
                option.value = stock.symbol;
                option.textContent = `${stock.quantity} shares of ${stock.symbol}`;
                sellDropdown.appendChild(option);
            });
        }

        function findStockIndex(symbol) {
            for (let i = 0; i < stocks.length; i++) {
                if (stocks[i].symbol === symbol) {
                    return i;
                }
            }
            return -1;
        }

        document.getElementById("buyForm").addEventListener("submit", buyStock);
        document.getElementById("sellForm").addEventListener("submit", sellStock);
    </script>
</body>
</html>

额外排查小技巧： #

• 检查文件扩展名：确保你的HTML文件后缀是.html，不是.txt或其他格式。
• 强制刷新浏览器：按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）清除缓存并重新加载页面。
• 检查语法错误：打开Chrome开发者工具的Console面板，看是否有CSS或JS的语法报错，及时修正。

内容的提问来源于stack exchange，提问作者IT Champ