样式未在CSS中绑定

Question

我正在尝试使用以下格式将样式绑定到我的CSS样式中，但无法正常工作，我是Web开发的学习者，有人可以帮助我请问什么是错吗？

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的子元素），则应首先拥有父元素，然后是空格（或{{1} }（如果是直接子级），然后是后代元素，就像您对> ...

您可以看到它适用于此简单更改：

h1

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

您可以了解有关selectors in mdn的更多信息。

Answer 2

您的规则中的问题是，类之间没有空格，这会使选择器任何h1元素，且其父级具有块标题，行和样本。

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

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

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