Question

在网页中，有多个div元素，其中一些有一个'class1'类。

问题：以下两个选择器是否会为我们提供所有具有class1类的div元素？

$("div .class1")

$("div.class1")

Answer 1

第一个将选择具有class1的后代的div类的元素。

<div>
    <p class="class1">text</p> <-- selected
</div>

第二个将选择具有div类的class1。

<div class="class1">  <-- selected
    <p>text</p>
</div>

以下两个选择器是否会为我们提供所有具有类的div元素 class1？

不，只有第二个$("div.class1")会。在jQuery和CSS中，类前面的空格意味着您正在寻找具有该类的后代元素。

Answer 2

这两个选择器做了很多不同的事情。

这个选择器：

$("div .class1")

将返回任何具有class1类并且是div的后代（即时或其他）的元素（无论元素类型如何）（无论div是什么课程，如果有的话。）

这个选择器：

$("div.class1")

将返回任何div，其类别为class1。

Answer 3

第一个选择器为您提供所有.class1元素作为任何<div>元素的后代。

第二个将为您提供实际上.class1自己的所有<div>元素。

Answer 4

NOP。

第一个将为div中的元素提供类class1，第二个元素将为您提供类＆＃39; class1`的div。

Answer 5

您发布的选择器之间的差异是元素层次结构。

让我们说你有这样的代码：

<div class="class1">
    This is a div with class name class1
</div>
<div>
    This is a div with no class name</div>
    <span class="class1">This is a span with class name class1</span>
<div class="class1">
    This is a div with class name class1
</div>
<div>
    This is a div with no class name
    <p class="class1">This is a paragraph with class name class1</p>
</div>
<div class="class1">
    This is a div with class name class1
</div>
<div class="class1">
    This is a div with class name class1
    <div class="class1">
        This is a div with class name class1
    </div>
 </div>

选择器$("div .class1")将返回<div>元素中具有类名class1的所有元素。在我们的示例中，这将是<span class="class1">...</span>，<p class="class1">...</p>和最后一个div <div class="class1">...</div>

而选择器$（“div.class1”）将返回<div>的所有具有类名class1的元素。在我们的示例中，这将是<div class="class1">。

的所有实例

这是帮助您了解更多内容的小提琴：http://jsfiddle.net/fatgamer85/m99onozo/1/

希望这会有所帮助。

这两个选择器之间的区别？

5 个答案: