jquery - css选择器理解

Question

我正在尝试选择包含直接子<p>元素的<li>元素的第一个直接子元素<ul>。

li>ul:parent>p:first-child

是我尝试过的，认为它会得到li带有 immediateul的 's 然后用选择器回到原来li的 's:parent然后选择 immediatep的第一个孩子。

例如

<ul>
    <li>
        <p>SELECT ME!</p>
        <ul>
            <li><!--some more stuff-->
        </ul>
    </li>
</ul>

在评论之后我应该说我在 jQuery 选择器中使用它，我:parent在 jQuery API 页面中找到了选择器。

score 1 · Accepted Answer

做

li > ul ~ p:first-of-type

选择你想要的？这应该选择p那些是第一个 children-whichare-的元素，p并且是 s 的直接子元素的兄弟元素。请参阅有关后代和兄弟选择器的这篇文章。ulli

编辑：仔细看，我发现这不适用于您的设置，因为它p需要ul在源代码之后。也许你可以稍微改变你的源顺序？

score 1 · Accepted Answer

您遇到的问题是li > ul:parent将选择<ul>元素，但指定> p:first-child不匹配任何内容，因为您的p元素在 . 中li，而不是 . 的直接后代<ul>。

您可以为此使用 jQuery 的:has()选择器：

$('li:has(ul) > p:first-child').css('background-color', 'red');

不幸的是，我认为纯 CSS 不可能做到这一点。

score 0 · Accepted Answer

我建议将 id 放在顶层ul，它可以防止你意外匹配任何p:first-child嵌套li。

jQuery

$('#top>li>ul').parent().find('>p:first-child');

3 回答 3