Javascript jQuery的toggleClass和.css文件中类名的顺序

背景：

我有一个箭头指向右侧的文本，单击文本/箭头会显示一个div，并将箭头right替换为箭头down

问题:

这个问题源于这样一个事实：我的代码的工作方式取决于.css文件中的顺序，我不知道为什么这对jQuery很重要

CSS:

HTML:

开发者工具>元素

切换可添加和删除向下箭头

关闭：

<div class="arrow arrowRight"></div>

打开：

<div class="arrow arrowRight arrowDown"></div>  

问题：为什么类的顺序。箭头向下会影响显示？AFAIK使用jQuery时css文件没有被重新解析。jQuery将该类添加到DOM中，解析器只搜索该元素

评论：我不喜欢在上课的时候把注意力集中在一起。我用错了吗？我在使用removeClass和addClass，然后改为toggleClass

为什么类.arrowDown的顺序会影响显示

因为CSS就是这样工作的。如果有两个规则具有相同的属性，则文件中稍后出现的规则将获胜

在您的情况下，.arrowRight和.arrowDown具有相同的特异性。如果有一个元素同时具有这两个类，.arrowDown将获胜。如果你改变规则，.arrowRight会赢

AFAIK使用jQuery时css文件没有被重新解析。jQuery将该类添加到DOM中，解析器只搜索该元素

您是对的，它与jQuery无关。浏览器仅查看元素具有哪些类，并为其应用规则

---

因此，CSS规则的顺序很重要，这与JavaScript或jQuery无关。考虑到它是一个特性。

因为你最后写了箭头图像：

如果同时有两个类，即arrowRight和arrowDown，则会出现最后一个类

.arrowRight{背景图像：url../graphics/triangleRight.gif；}

.arrowDown{背景图像：url../graphics/triangleDown.gif；}

要正确使用该选项，请使用如下切换：

$(".arrowRight").toggleClass("arrowRight arrowDown");

---

这可以确保只有一个箭头：arrowRight或arrowrown

每个CSS规则对浏览器都有一定的权重。例如，你有这个CSS

a.colored { color: violet;}
.colored { color: orange;}
div a {color: green;}
a {color: red:}

这个HTML

<div><a class="colored" href="example.html">Test link</a></div>

链接的颜色将为紫色，因为a.colored的规则是最具体的，它定义了一个类，并且比其他规则有更多的权重，因此它将最后应用。你可以阅读更详细的解释

在您的示例中，有两条相同权重的规则。所以浏览器只是按照它们在CSS文件中的顺序应用它们。首先应用arrowRight，然后应用arrowDown

---

这里最重要的是，只有CSS文件中的位置才重要，不是标记的class属性中类的顺序。

但是-这就是我感到困惑/弄错的地方：在HTML中，它是class=arrow arrow right arrow down在HTML/DOM中的位置不应该取代css文件中的顺序吗？@Mayo：这不是它的工作方式。HTML属性中的顺序是不相关的。@Mayo在HTML中，您应该只将其中一个箭头右键或箭头向下键放在初始设置中，但不能将两者都放在初始设置中。@FelixKling-谢谢。我知道我没有正确地阅读东西，我想了解我遗漏了什么。@Bhojendra-C-LinkNepal-这个toggleClass解决方案不起作用。有趣的是，我认为这不适用于jquery toggleClass，因为它没有重新解析整个css文件，因此顺序并不重要。如果删除一个类，然后添加一个类，那么css中的顺序应该无关紧要。我需要重新思考如何使用toggleClass。

$(".arrowRight").toggleClass("arrowRight arrowDown");

a.colored { color: violet;}
.colored { color: orange;}
div a {color: green;}
a {color: red:}

<div><a class="colored" href="example.html">Test link</a></div>