CSS 选择器测试器有效性

Question

我刚刚找到了以下 CSS 选择器测试器：
http://www.w3schools.com/cssref/trysel.asp

它有效吗？ 那里有奇怪的选择器，例如：

p:第一
ul li:eq(0)
：包含（鸭）

例如，以下对我不起作用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS Selectors</title>
    <style>
        p:first {
            outline: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
        <p>First paragraph</p>
        <p>Second paragraph</p>
        <p>Third paragraph</p>
    </div>
</body>

</html>

演示

Answer 1

您链接到的那个页面是错误的（提示 W3Schools 的嘘声和嘲笑）。 那里列出的选择器是jQuery 选择器，其中许多是非标准的。 它们不是有效的 CSS 选择器，即使它们使用类似的语法。

尽管:first伪类被定义为与@page规则一起使用，但它没有被定义为在它之外的任何地方使用。 像p:first这样的选择器在样式规则或@page规则中都无效，在document.querySelectorAll()调用中也无效。 页面选择器是一种特殊类型的选择器，在CSS2.1 的这一部分以及 Paged Media 模块的这一部分中都有描述。 虽然它们是 CSS 标准的一部分，但它们不被视为选择器标准或相关标准的一部分，尽管与 jQuery 选择器一样，它们共享相似的语法。

虽然:first也在jQuery 中定义，但它在 jQuery 中的功能与在@page规则中非常不同。 您链接到的页面显然是在展示 jQuery 的版本。 我会犹豫将:first称为一个有效的选择器，更确切地说是一个有效的页面选择器或一个jQuery 选择器，因为它对上下文非常敏感，而且它显然不能用于 CSS 样式表或document.querySelectorAll() 。

像:first 、 :eq()和它们相关的选择器是非标准的 jQuery 选择器。 它们的功能也与:first-child 、 :nth-child()等非常不同，因此虽然您可以使用这些选择器在 CSS 中在某种程度上模拟它们，但它们并不完全相同（否则 jQuery 不会'没有创建非标准的）。 有关深入解释，请参阅我对这个问题的回答。

如前所述， :contains()将成为 CSS 的一部分，但从未实现。 无论如何，它在 jQuery 中被模拟，但请记住，它在性能方面可能很昂贵和/或不像您期望的那样工作。

Answer 2

这些是（大部分）有效的选择器，尽管有些模糊。

:first

这是一个选择器，用于在打印时为文档的第一页设置样式。 浏览器支持似乎充其量是不确定的。 请参阅： https : //developer.mozilla.org/en-US/docs/Web/CSS/ : first

在您的示例标记中，您似乎希望为第一个项目设置样式，在这种情况下，您可以使用:first-child参见： https : //developer.mozilla.org/en-US/docs/Web/CSS/ :first-child -孩子

:eq(0)

这是一个 jQuery CSS 选择器。 在纯 CSS 中，您可能会使用:nth-child来做同样的事情。 见： http : //api.jquery.com/eq-selector/

:contains()

这个选择器是被提议的，但从未被纳入规范。 请参阅：为什么选择器 h3:nth-child(1):contains('a') 不起作用？

CSS 选择器测试器有效性

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-03-29 09:19:15

解决方案2
0 2014-03-29 03:14:40

CSS 选择器测试器有效性

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-03-29 09:19:15

解决方案2 0 2014-03-29 03:14:40

解决方案1
2 已采纳 2014-03-29 09:19:15

解决方案2
0 2014-03-29 03:14:40