CSS 樣式沒有改變樣式/拋出錯誤

Question

我對網站設計非常陌生，我正在嘗試更改按鈕的背景顏色，但由於某種原因它不起作用。 有人可以幫忙嗎？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="widthz=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Title</title>
</head>
<body>
    <script src="application.js"></script>
    <h3>Small Header</h3>
    <button id="InformationButton">Information</button>
</body>
</html>

styles.css：

.InformationButton {
    background-color: aqua;
    border : solid;
}

Answer 1

由於您使用 id 來引用 HTML 中的按鈕，因此您應該使用id selector (#)而不是class selector(.) 。

因此，如下替換您的 CSS。

#InformationButton {
    background-color: aqua;
    border : solid;
}

在文檔中閱讀有關 CSS 選擇器的更多信息

Answer 2

您正在使用 CSS ID 選擇器來引用您的按鈕。 將 CSS 更改為 class 選擇器：

#InformationButton {
    background-color: aqua;
    border : solid;
}

或將您的按鈕元素更改為

<button class="InformationButton">Information</button>

CSS 樣式沒有改變樣式/拋出錯誤

問題描述

2 個解決方案

解決方案1
1 2022-01-30 18:49:26

解決方案2
0 2022-01-30 18:53:04

CSS 樣式沒有改變樣式/拋出錯誤

問題描述

2 個解決方案

解決方案1 1 2022-01-30 18:49:26

解決方案2 0 2022-01-30 18:53:04

解決方案1
1 2022-01-30 18:49:26

解決方案2
0 2022-01-30 18:53:04