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

Why is the space in this jQuery selector-expression relevant

本文关键字：空格 表达式 jQuery 选择器 为什么      更新时间：2023-09-26

假设我有这个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>。

斯菲德尔

div:has(pre) :eq(0)使用后代选择器。另一个没有。

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

在CSS选择器中，空格表示"后代"。 所以div p意味着"所有<p>标签都是<div>的后代。

当你做 'div:has(pre):eq(0)' ，您将:has和:eq应用于div选择器，因此您将找到第一个内部有<pre>的<div>。

另一方面，'div:has(pre) :eq(0)'会找到任何<div>中第一个里面有<pre>的孩子。

相关文章：