Question

背景：

我的文字带有一个指向右侧的箭头，单击文本/箭头显示一个div并用arrowDown替换arrowRight。

问题：

问题源于我的代码根据.css文件中的顺序工作的事实，我不知道为什么这对jQuery来说很重要。

CSS：

.arrow{display:inline-block;  width:15px; height:10px;background-repeat:no-repeat;}
.arrowRight{background-image:url("../graphics/triangleRight.gif"); }
.arrowDown{ background-image: url("../graphics/triangleDown.gif");}

HTML：

<div id="showListOfBids" class="align-c">
     List of Bids <div class="arrow arrowRight">
</div>

JQUERY

$("#showListOfBids").click(function(){
   $(".bidList").toggleClass("show");
   $(".arrowRight").toggleClass("arrowDown");
});

开发人员工具＆gt;元素

切换添加并删除arrowDown

关闭：

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

切换：

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

问题：为什么类.arrowDown的顺序会影响显示？使用jQuery时，AFAIK的css文件没有被重新分析。 jQuery将类添加到DOM，解析器只搜索那一个元素。

评论：我不想在课程上翻倍。我使用不正确吗？我正在使用removeClass和addClass并切换到toggleClass

Answer 1

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

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

在您的情况下，.arrowRight和.arrowDown具有相同的特异性。如果存在包含这两个类的元素，则.arrowDown获胜。如果您切换规则，.arrowRight将获胜。

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

你是对的，它与jQuery无关。浏览器只能看到元素具有哪些类，并为它们应用规则。

因此，CSS规则的顺序很重要，与JavaScript或jQuery无关。将其视为“特征”。

Answer 2

因为你最后写了arrowDown图像：

同时拥有两个类，即arrowRight和arrowDown，最后一个将会发生。

~~.arrowRight {背景图像：网址（＆＃34; ../图形/ triangleRight.gif＆＃34）; }~~

.arrowDown {background-image：url（＆＃34; ../ graphics / triangleDown.gif＆＃34;）;}

要正确使用该用途切换如下：

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

这使您确信只有一个箭头：arrowRight或arrowDown

Answer 3

每个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的规则是最具体的（它有一个类定义）并且比其他规则具有更多权重，因此它将最后应用。您可以阅读更详细的解释here。

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

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

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

3 个答案: