javascript - 为什么 CSS .addClass 没有根据特性应用适当的样式？

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 特异性如何工作的理解？

score 2 · Accepted Answer

你错过了一些东西。这行代码

$("#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 将按预期工作

score 0 · Accepted Answer

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

2 回答 2