javascript - 为什么这个 jQuery 选择器表达式中的空格是相关的

Question

假设我有这个 HTML 片段(假设剩余文档没有其他 div):

<div>
    <p>Lorem ipsum dolor sit amet</p>
     <pre>1st</pre>
</div>

使用 jQuery 我希望这段代码 ...

$('div:has(pre) :eq(0)').css('background-color','red');
$('div:has(pre):eq(0)').css('color','green');

将整个背景颜色设置为红色，颜色设置为绿色<div> .换句话说，我希望两个 jQuery 选择器都匹配包含单个 div 的同一组元素。然而，第一个选择器似乎只匹配<pre>。 ，而第二个选择器实际上匹配 <div> .

jsfiddle

Answer 1

div:has(pre) :eq(0) 使用 descendant selector .另一个没有。

这是为了匹配 CSS 选择器的行为。