【问题标题】：how to apply css to multiple line class selector如何将css应用于多行类选择器
【发布时间】：2020-09-24 20:23:18
【问题描述】：

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

HTML

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

假设以上：

CSS

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

当两个类之间没有空格时，表示它指的是一个同时具有这两个类的元素。

【讨论】：

【解决方案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

【讨论】：