如何将 css 应用于多行 class 选择器

Question

如何将特定的 css 应用到 second-page

HTML

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

假设以上：

CSS

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

我想专门为 second-page 应用不同的背景颜色，但不会修改 section-header。

Answer 1

如果您希望将样式应用于具有 .second-page class 的任何元素，您应该使用：

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

如果您希望样式仅应用于还具有 .second-page class 的 .section-header 元素，那么您应该使用：

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

当两个class之间没有space时，表示它引用了一个同时具有class的元素。

有关 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