带有所有 H 标签的 JavaScript 中的 CSS 选择器答案

【问题标题】：CSS Selectors in Javascript with all H tags带有所有 H 标签的 JavaScript 中的 CSS 选择器
【发布时间】：2010-12-09 05:42:33
【问题描述】：

使用Prototype JS库，我想选择所有的子链接元素（A标签），不管它们的父元素是：H1，H2、H3、H4 或 H5 （等等）带有一个简单的 CSS 选择器规则（而不是进一步JS，比如循环等）。

所以简单但漫长的方法是：

$('page').select('h1 > a, h2 > a, h3 > a, h4 > a, h5 > a')

我想我正在寻找一个不存在的通配符属性，例如 h*。

也许上面的例子是要走的路，但我希望有一种更简单、更简洁、更有效的方法来做到这一点。

感谢提示。

【问题讨论】：

【解决方案1】：

根据 Fabien Ménager 对原始问题的评论，看起来除了我已经拥有的之外，我没有可以使用的简单 CSS 选择器。

$('page').select('h1 > a, h2 > a, h3 > a, h4 > a, h5 > a')

虽然如果我想对其进行编程或空 JQuery（这不是我的选择）还有其他选项，但我正在专门寻找 CSS 规则。

感谢所有试图提供帮助的人。

【讨论】：

【解决方案2】：

使用 jQuery：

$(":header a")

【讨论】：

【解决方案3】：

http://docs.jquery.com/Selectors/header 说：

:header 匹配所有作为标题的元素，如 h1、h2、h3 等。

为页面上的所有标题添加背景和文本颜色。

$(":header").css({ background:'#CCC', color:'blue' });

【讨论】：

【解决方案4】：

从原型开发人员那里得到了答案。至少目前，这些是最好的也是唯一的解决方案：

$$('h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a')
$('page').select('h1 > a, h2 > a, h3 > a, h4 > a, h5 > a')

但是，下一个 Prototype 版本将允许您选择选择器引擎，并将默认为 Sizzle。 :header 伪选择器实际上是 Sizzle 的一部分，因此将在原型的未来版本中可用（只要您选择 sizzle 作为选择器引擎）。我猜它以前没有被包括在内，因为它不是任何规范的一部分。

【讨论】：