如何將 css 應用於多行 class 選擇器

Question

您如何將特定的css應用到second-page

HTML

<div className = "section-header second-page">SOME MESSAGE</div>

假設上述情況：

CSS

.section-header {
  background-color: black,
}

我想將不同的背景顏色專門應用於不修改section-header的second-page 。

Answer 1

如果您希望樣式應用於任何具有.second-page class 的元素，您應該使用：

.second-page {
  backgound-color: red,
}

如果您希望樣式僅適用於也具有.second-page class 的.section-header元素，那么您應該使用：

.section-header.second-page {
  backgound-color: red,
}

當兩個類之間沒有空格時，這意味着它指的是具有兩個類的元素。

有關 CSS 選擇器的更多信息，請查看https://www.w3schools.com/cssref/css_selectors.asp

Answer 2

您的 HTML 應該是：

<div class="section-header second-page">SOME MESSAGE</div>

您的 CSS 可能是：

.second-page {
  background-color: black,
}

您可以在 HTML 中混合使用多個類，或者單獨定位它們。

如果您需要驗證您的 HTML 代碼，您可以使用此免費服務： https://validator.w3.org/#validate_by_input