jquery - css选择器理解

Question

我正在尝试选择第一个直系 child <p> <li> 的元素包含立即 <ul> 的元素 child 。

li>ul:parent>p:first-child

是我尝试过的，认为它会得到 li与立即ul然后回到原来的li与 :parent 一起选择器然后选择立即 p的 child 是第一个。

例如

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

根据评论我应该说我在 jQuery 选择器中使用它并且我找到了 :parent jQuery API 页面中的选择器。

Answer 1

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

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

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

这是一个 jsFiddle demo .

不幸的是，我认为这对于纯 CSS 是不可能的。