Question

我理解css特异性的概念。这是我的情况：

我有一种叫做“成功”的课程风格。这简单地使颜色变为绿色......等等。现在我有2个单独的css文件来定义.success（它们定义了不同的样式）。我们称这些为Site.css和Page.css。

Site.css中的类只是：

.success { color: green; }

Page.css中的类更明确：

#MainRegion div .resultPanel .success { background-color: green; }

现在在javascript（使用jquery）中，我添加了一个类似这样的类：

$("#MainRegion div .resultPanel").addClass("success");

现在，当我使用浏览器调试器（F12）检查时，我可以看到应用了Site.css样式（而不是Page.css）。我认为Page.css中定义的类具有更多的特异性，因此它应该是被调用的类。我错过了一些关于css特异性如何起作用的理解吗？

Answer 1

你错过了什么。这行代码

$("#MainRegion div .resultPanel").addClass("success");

返回

#MainRegion div .resultPanel.success

<div class="resultPanel success"></div>

而不是

#MainRegion div .resultPanel .success

<div class="resultPanel">
    <div class="success"></div>
</div>

因此，根据您的需要，您可以更改css或js以定位正确的元素

如果你的CSS是

#MainRegion div .resultPanel.success { background-color: green; }

然后你的js将按预期工作

Answer 2

老实说，你应该在你的一个样式表上创建一个不同的成功类。如果我正确理解你将有绿色BG与绿色字体颜色。两个样式表应该一起工作，因为您只为两个调用定义了不同的东西，但这不是最佳实践。