【问题标题】: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 的不同背景颜色。

【问题讨论】:

    标签: css reactjs react-native sass less


    【解决方案1】:

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

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

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

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

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

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

    【讨论】:

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

      【讨论】:

      • 我错过了反应标签抱歉:-)
      猜你喜欢
      • 1970-01-01
      • 2017-05-12
      • 2017-09-01
      • 2013-11-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-10-29
      • 1970-01-01
      相关资源
      最近更新 更多