为什么这个css会生成一个黄色段落

Question

        <style>
    p {
        color:         red;
    }
    .warm {
        color:         green;
    }
    p.warm {
        color:         orange;
    }
    p.cute {
        color:         yellow;
    }
    p.boring {
        color:         blue;
    }
    }

    </style>

<p class="warm cute boring">

我希望这会给代码带来蓝色。你能解释一下原因吗？

Answer 1

您未正确关闭p.cute规则。

p.cute {
    color:         yellow;

p.boring {
    color:         blue;
}
}

应该是

p.cute {
    color:         yellow;

}
p.boring {
    color:         blue;
}

Answer 2

这不是一个有效的CSS，因为你不能在CSS中嵌套规则。

由于此原因，p.boring规则将被忽略。