css选择器理解答案

【问题标题】：css selector understandingcss选择器理解
【发布时间】：2013-03-12 09:29:54
【问题描述】：

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

li>ul:parent>p:first-child

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

例如

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

按照 cmets，我应该说我在 jQuery 选择器中使用它，并且在 jQuery API 页面中找到了 :parent 选择器。

【问题讨论】：

【解决方案1】：

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

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

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

很遗憾，我认为纯 CSS 无法做到这一点。

【讨论】：

【解决方案2】：

会

li > ul ~ p:first-of-type

选择你想要的？这应该选择p 元素，它们是p 的第一个子元素，它们是ul 元素的兄弟，它们是lis 的直接子元素。请参阅后代和兄弟选择器上的 this post。

编辑：仔细观察，我发现这与您的设置相当工作，因为p 需要在源代码中的ul 之后.也许您可以稍微更改一下您的源顺序？

【讨论】：

【解决方案3】：

我建议将 id 放在顶级 ul 上，这样可以防止您意外匹配嵌套 li 中的任何 p:first-child。

JQuery

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

【讨论】：