为什么嵌套在 css class 选择器中没有按预期工作

Question

我有这个段落元素：

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

并尝试像这样设置样式

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

它不起作用，但是当我删除 p 选择器时它起作用了。

我认为它会起作用，因为在 sass 中嵌套是这样工作的，否则在 sass 中使用嵌套就没有这样的好处。

Answer 1

删除 space 因为 space 用于 descendents，您需要 select <p> with class bold 而不是 class bold within paragraph tag

p.bold{
     font-weight:bold;
 }

p.big

也一样

Answer 2

p .bold

CSS 选择器中的空格表示后代，因此上述选择器正在寻找 p 的后代元素，该元素具有 class .bold

你需要

p.bold

Answer 3

必须是p.big和p.bold或p.big.bold，否则不行，希望对朋友有帮助:)

Why nesting in css class selector don't work as expected