样式在css中不绑定

Question

我试图在我的css风格绑定样式使用以下格式，但它不工作，我是网络开发的学习者，有人可以帮助我，请什么是错误的？

css

.block-header.row.sample h1{
        color: aqua;
    }

html

 <div class="block-header">
        <div class="row sample">
          <div class="col-sm-6">
            <h1 class="page-title">Pending Approvals</h1>
          </div>
       </div>
 </div>

Answer 1

您的样式规则是错误的，应该是：.block-header .row.sample h1而不是.block-header.row.sample h1。如果一个元素的样式是另一个元素的子元素(在本例中，.row.sample是.block-header的子元素)，则应该先拥有父元素，然后是空格(如果是直接子元素，则为> )，然后是子元素，就像对h1所做的那样……

你可以看到它通过这个简单的改变是有效的：

​

.block-header .row.sample h1{
        color: aqua;
}

 <div class="block-header">
        <div class="row sample">
          <div class="col-sm-6">
            <h1 class="page-title">Pending Approvals</h1>
          </div>
       </div>
 </div>

​

你可以阅读更多关于selectors in mdn的内容。

Answer 2

规则中的问题是类之间没有空格，这使得选择器成为具有父类的任何h1元素-块标题、行和样本。

您需要放置空格，以便选择器知道这些元素相互嵌套：

.block-header .row.sample h1 {
    color: aqua;
}

了解有关这些选择器如何在this FreeCodeCamp guide中工作的更多信息。