CSS或jQuery获取项目_with_某种类型的第一个孩子答案

【问题标题】：CSS or jQuery getting items _with_ first-child of a certain typeCSS或jQuery获取项目_with_某种类型的第一个孩子
【发布时间】：2012-01-20 06:09:56
【问题描述】：

是否有办法在 CSS (IE7+) 或 jQuery 中选择第一个子项具有特定类型的项目，例如下面的伪代码，您可以选择所有 li第一个孩子a：

li:first-child(a)

更新

我正在寻找@SLaks 建议的解决方案，因为我想在一个选择器中获得它。但是 .parent() 方法更快，请参阅：http://jsfiddle.net/c4urself/Qw8fX/

$("li > a:first-child").parent()

对比

$("li:has(>a:first-child)")

更新 2

在 jsPerf 上查看这两种方法之间的性能差异

http://jsperf.com/jquery-has-child-vs-parent-child-and-parent

【问题讨论】：

标签： jquery css css-selectors

【解决方案1】：

CSS 无法做到这一点，但 jQuery 可以：

li:has(>a:first-child)

CSS 无法做到这一点，因为 CSS 设计为在浏览器读取 HTML 时以只进的方式应用。始终可以立即确定哪些 CSS 规则适用于元素，而无需等待元素的子元素或后续兄弟元素。

【讨论】：

太棒了！正是我想要的

【解决方案2】：

在 jQuery 中$('ul li a:first-child').parent();

【讨论】：

谢谢，我会接受@SLaks 的建议，因为它无需调用 .parent() 即可直接选择 li。
@c4urself：我猜这会更快一些。如果要切换，请先测量。如果你这样做，请告诉我；我很好奇（但很懒）
我是这么认为的。 :has 是最慢的选择器之一，因为它需要搜索后代树并且不能使用 querySelectorAll。

【解决方案3】：

使用 li:first-child 伪类，您可以将所需的样式应用于 li 项目，然后设置嵌套在其中的 a 的样式。看看http://reference.sitepoint.com/css/pseudoclass-firstchild

【讨论】：

谢谢！这是正常的 :first-child 选择器，我正在寻找可以选择 li 自己的东西

【解决方案4】：

我认为这在 CSS 中是不可能的，但在 jQuery 中你会想使用filter()。

确保您根据contents() 进行过滤，而不是children()，因为您会希望看到文本节点。

$( function() {   
  $('li').filter( function() {
    return $(this).contents().first().is('a');
  }).each( function() {
    $('body').append($(this).text() + '<br/>');
  });
});

http://jsbin.com/olufan

它比在 jQuery 选择器中执行所有操作需要更多的代码，但性能应该要好得多。 jQuery 选择器只有在指定单个术语时才能真正快速运行。

【讨论】：

谢谢，不过我正在寻找一个简单的 li 选择，请参阅 @SLaks 实现。