为什么在css类选择器中嵌套不能按预期工作

Question

我有这个段落元素：

<p class='big bold'>Some random text</p>

并试着像这样设计它

p .big{
    font-size:60px;
}
p .bold{
    font-weight:bold;
}

它不起作用，但当我删除p选择器时，它可以工作。

我认为它会起作用，因为在这样的sass嵌套工作中，如果没有，那么在sass中使用嵌套就没有这样的好处。

Answer 1

p .bold

CSS选择器中的空格表示后代，因此上面的选择器正在寻找具有类p的{​​{1}}的后代元素

你需要

.bold

Answer 2

删除空格，因为空格用于descendents，您需要选择<p> with class bold而不是class bold within paragraph tag

p.bold{
     font-weight:bold;
 }

{p>同样适用于p.big

Answer 3

必须是p.big和p.bold或p.big.bold，否则无法正常工作， 希望它有助于交配：）