如何将CSS应用于多行类选择器

问题描述 投票:0回答:2

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

HTML

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

假设以上:

CSS

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

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

css reactjs react-native sass less
2个回答
1
投票
您的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


1
投票
如果您希望样式应用于.second-page类的任何元素,则应使用:

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

如果您希望样式仅应用于也具有.section-header类的.second-page元素,则应使用:

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

[当两个类之间没有空格时,表示它同时引用了两个类的元素。

有关CSS选择器的更多信息,请检查https://www.w3schools.com/cssref/css_selectors.asp

© www.soinside.com 2019 - 2024. All rights reserved.