Question

我使用jQuery来改变侧边栏的宽度，在CSS的工作代码中它显示了这个：

#wrapper.MenuDisplay #my-sidebar-wrapper {
    width: 200px;
}

但是在浏览了w3schools和mozilla等之后，我还没有找到任何看起来像＃foo.bar的选择器。

我试图解决这个问题的原因是我无法理解为什么这个CSS没有立即应用，以及jQuery toggleClass如何能够应用这个宽度（它是单击按钮即可成功。

有谁知道这里发生了什么？选择器是什么以及为什么它在单击jQuery按钮后工作但不是直接在页面加载时？

非常感谢

Answer 1

这意味着标识为foo和类bar的元素，缩写为#foo.bar

Answer 2

[id][class] #wrapper是元素的id，.MenuDisplay是class。元素必须具有该id和类才能使CSS工作。

Answer 3

#foo.bar

匹配同时具有id =“foo”和class =“bar”的元素。

Answer 4

据我所知，从你的问题来看， jQuery选择器允许您选择和操作HTML元素或根据其名称，ID，类，类型，属性，属性值等选择HTML元素。 它基于现有的CSS选择器，此外，它还有一些自己的自定义选择器。

在这种情况下：

#foo.bar指向DOM中具有 id =“foo”和 class =“bar”的元素。

jQuery Selector Tester演示不同的选择器：

jQuery Selectors Test Page

希望我能帮忙！

Answer 5

您似乎在询问 选择器序列 的含义。

根据目前W3C standard，它是......

...... simple selectors的combinator链未被universal selector分隔。它始终以类型选择器或通用选择器开头。序列中不允许使用其他类型选择器或通用选择器。

并非每个人都认为定义的第二句是真的，因为，例如，#this或.that似乎不是以类型选择器（a，{{1}开头}，div等...）或通用选择器（span）。但是，应该记住......

...每当一系列选择器不以类型或通用选择器开头时，它“默认”为以可省略的firebase开头。

因此，*是#this的简写，*#this是.that的简写。 *.that是#this.that的缩写。

事实上，如果您阅读整个通用选择器段落，您会注意到它的末尾有一个注释，建议不要省略它。

但是，几乎没有人会尊重这个建议，实际上，只有当有人想要为页面中的每个元素提供*#this.that属性时，才会看到通用选择器。就像CSS

一样

作为旁注，不要忽略CSS中的通用选择器应该让它更快。这不难测试并且似乎是正确的，但差异可以忽略不计。

Answer 6

#foo.bar指的是同时包含foo id和bar类的元素。

$('#foo.bar').fadeOut('slow');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='foo' class='bar'>box</div>