如何使用css选择多个嵌套类？

Question

这是css选择器对以下div部分的作用吗？

.grid-row .col-6 {
  font-weight: bold
}

html：

<div class="grid-row">
    <div class="col-6">
        blah<br/>blah2
    </div>
</div>

Answer 1

没有。对于嵌套选择器，您必须使用由空格给出的descendant selector：

这是针对任何层次结构级别的嵌套元素

.grid-row .col-6
{
   font-weight: bold
}

或者您可以使用由>符号提供的child selector：

这仅针对元素的直接子元素

.grid-row > .col-6
{
   font-weight: bold
}