查找具有某些后代项目的元素答案

【问题标题】：Finding elements that have certain descendent items查找具有某些后代项目的元素
【发布时间】：2012-01-13 05:22:17
【问题描述】：

我正在尝试定位具有子菜单项的导航菜单项，以便在这些项之后放置一个向下箭头。到目前为止，我有这个：

nav[role=navigation] ul li a:after { 
padding-left:5px; 
content: "\25BE";
color:#00b49c;
}

有什么想法可以做到这一点吗？

我试过了：nav[role=navigation] > ul li a:after 但没有运气。

谢谢大家

【问题讨论】：

你能给我们看一个 HTML sn-p 吗？
nav[role="navigation"] ul li a:after
您是否仅限于 CSS？或者你愿意接受 jQuery 吗？如果是后者，则 jQuery 具有诸如 li:has(ul) 之类的选择器（选择包含一个或多个 ul 标记的所有 li 标记）。如果 jQuery 没问题，我明天会发布一个解决方案供您接受。
@ClarkeyBoy：我认为您可以发布答案。 OP 在下面承认 jQuery 是要走的路。

标签： html css css-selectors

【解决方案1】：

试试

nav[role=navigation] ul li a::after { 
content: "\25BE";
color:#00b49c;
display: block;
float: left;
width: 20px;
height: 10px;
}

【讨论】：

这不是针对作为父项的列表项 - 它针对所有项，无论它是否有子项。
对不起，我的错：nav[role=navigation] > ul > li > a:after
我刚刚被告知可悲的是，CSS 没有任何方法可以根据子级更改父级选择器。看起来jquery是要走的路。谢谢大家

【解决方案2】：

根据提供的信息，我猜测 ul 是子项，对吧？如果是这种情况，我能想出的最佳解决方案（未经测试）是：

$(document).ready(function() {
    $("nav[role=navigation]:has(ul)").each(function() {
        $("ul li a", $(this)).after("\25BE").css({color: "#00b49c", paddingLeft: "5px"});
    });
});

如果您是 jQuery 新手，请注意以下几点：

使用$(document).ready(function() {}); 方法是标准的。
:has 选择器是 jQuery 特有的（据我所知，尽管它可能包含在 CSS3 或 4 中——无论何时出现）。
请注意，.css 函数中的 CSS 属性是用逗号分隔的，属性名称在使用的地方漏掉了破折号，破折号后面的第一个字母大写（例如 paddingLeft）。
ul li a 之后的$(this) 用于表示.each 循环中当前对象中的无序列表中的列表项内的任何链接。

我不完全确定您要选择什么 - 无论是导航、ul 还是 li。不管是哪一种，你都应该修改上面的代码，让你想要选择的元素在第一行的 : 之前。

如果我没有很好地回答这个问题，那么请详细说明您想要达到的目标，我会尽力修改我的答案以满足您的要求。

【讨论】：