Chrome与Firefox DevTools中CSS级联层!important显示不一致问题咨询

配置说明 #

• 将Bootstrap导入至framework层；
• 在utilities层中添加带有!important的自定义样式，尝试提升特异性；
• 将样式应用到元素上，根据级联和特异性规则，预期framework层的padding样式优先级更高。

问题现象 #

• 元素实际渲染的padding来自framework层，符合预期；
• Chrome DevTools错误显示utilities层的!important padding样式被应用；
• Firefox DevTools则能正确反映级联层的样式优先级。

复现步骤 #

• 将CSS框架（如Bootstrap）导入至framework层；
• 在utilities层中定义带!important的自定义样式；
• 将样式应用到元素，分别在Chrome和Firefox DevTools中查看。

预期结果 #

DevTools应根据级联和特异性规则正确显示生效样式。

实际结果 #

Chrome DevTools错误显示utilities层的!important样式已应用，而实际渲染的是框架样式。

附加信息 #

• Chrome版本：Version 131.0.6778.205 (Official Build) (arm64)
• 操作系统：Version 15.1.1 (24B91) macOS Sequoia
• 示例代码：github.com/iheathers/css-layers

问题咨询 #

这是Chrome DevTools的已知问题吗？是否有解决方法或设置能让它正确显示生效样式？希望得到进一步调试的建议！

示例代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>

<body>
    <button class="p-1">Default</button>
</body>

</html>

CSS代码

@layer framework, utilities;

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css") layer(framework);

@layer utilities {
    .p-1 {
        padding: 2rem !important;
    }
}

DevTools显示对比 #

内容的提问来源于stack exchange，提问作者Pritam Shrestha