CSS类选择器优先级是否高于*通用选择器？类样式不生效原因咨询

该现象与选择器优先级无关，核心诱因是HTML存在语法错误，浏览器自动修正DOM结构后，.para 类没有匹配到你预期生效的元素：

• 按照HTML规范，<p> 为段落标签，仅允许容纳短语内容（文本、行内元素等），禁止嵌套 <ul> 这类块级元素。
• 浏览器解析代码时，遇到 <p class="para"> 后的 <ul> 标签会自动插入 </p> 闭合前面的段落，你末尾写的 </p> 会被解析为无内容的空段落标签，最终实际渲染的DOM结构如下：

<body>
    <a> text </a>
    <p class="para"> </p>
    <ul>text</ul>
    <a>text1 </a>
    <p> </p>
</body>

• 类选择器优先级确实高于通用选择器*，但 .para 仅匹配到了上述无内容的空段落，自然看不到红色背景效果；你原本以为在段落内的 <ul>、<a> 实际是段落的同级元素，仅会应用通用选择器设置的灰色背景。

将原本用于包裹内容的 <p> 标签替换为支持嵌套块级元素的容器标签即可，比如 <div>：

<body>
    <a> text </a>
    <div class="para"> 
        <ul>text</ul>
        <a>text1 </a>
    </div>
</body>

修改后 .para 可正常匹配到包含子元素的容器，红色背景即可正常生效。

内容的提问来源于stack exchange，提问作者uyed gtharet