css选择器理解

Question

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

li>ul:parent>p:first-child

是我尝试过的，认为它会立即li获得ul，然后回到原来的li＆＃39 ; s使用:parent选择器，然后选择第一个直接p个孩子。

e.g。

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

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

Answer 1

确实

li > ul ~ p:first-of-type

选择你想要的？这应该选择p元素，这些元素是第一个孩子 - p，以及ul元素的兄弟姐妹，它们是{li的直接子元素1}}秒。有关后代和兄弟选择器的信息，请参阅this post。

修改：仔细观察我发现这不会完全与您的设置一起使用，因为p需要在{{1}之后在源头。也许您可以稍微更改源订单？

Answer 2

您遇到的问题是li > ul:parent会选择<ul>元素，但指定> p:first-child与任何内容都不匹配，因为您的p元素位于li内1}}，而不是<ul>的直接后代。

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

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

这是一个jsFiddle demo。

不幸的是，我不认为这可以用纯CSS。

Answer 3

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

JSFiddle

<强> JQuery的

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