Question

我刚刚找到了以下CSS Selector Tester：
http://www.w3schools.com/cssref/trysel.asp

有效吗？那里有奇怪的选择器：

号码：第一
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>

DEMO

Answer 1

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

虽然:first伪类被定义为与@page规则一起使用，但它并未定义为在其外的任何地方使用。像p:first这样的选择器在样式规则或@page规则中无效，在document.querySelectorAll()调用中也无效。页面选择器是一种特殊类型的选择器，在this section of CSS2.1和this section of the Paged Media module中有所描述。虽然它们是CSS标准的一部分，但它们不被视为Selectors standard或相关标准的一部分，尽管与jQuery选择器一样，它们具有相似的语法。

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

与:first类似，:eq()及其相关选择器是非标准jQuery选择器。它们对:first-child，:nth-child()等的功能也有很大的不同，所以虽然你可以使用这些选择器在CSS中在某种程度上模拟它们，但它们并不完全相同（否则jQuery不会没有创造出非标准的）。请参阅我对this question的回答，以获得深入的解释。

如上所述，: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()

这个选择器已被提出，但从未进入规范。请参阅：Why doesn't the selector h3:nth-child(1):contains('a') work?

CSS Selector Tester的有效性

2 个答案: