CSS 选择器测试器有效性

Question

I just found the following CSS Selector Tester:我刚刚找到了以下 CSS 选择器测试器：
http://www.w3schools.com/cssref/trysel.asp http://www.w3schools.com/cssref/trysel.asp

Is it valid?它有效吗？ There are strange selectors there like:那里有奇怪的选择器，例如：

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

For example, the following doesn't work for me:例如，以下对我不起作用：

<!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

That page you've linked to is mistaken (cue booing and jeering at W3Schools).您链接到的那个页面是错误的（提示 W3Schools 的嘘声和嘲笑）。 The selectors listed there are jQuery selectors , many of which are non-standard.那里列出的选择器是jQuery 选择器，其中许多是非标准的。 They are not valid CSS selectors, even though they use a similar syntax.它们不是有效的 CSS 选择器，即使它们使用类似的语法。

Although the :first pseudo-class is defined for use with the @page rule, it is not defined for use anywhere outside it.尽管:first伪类被定义为与@page规则一起使用，但它没有被定义为在它之外的任何地方使用。 A selector like p:first is not valid in either a style rule or a @page rule, nor is it valid in a document.querySelectorAll() call.像p:first这样的选择器在样式规则或@page规则中都无效，在document.querySelectorAll()调用中也无效。 Page selectors are a special type of selector that is described in this section of CSS2.1 as well as this section of the Paged Media module .页面选择器是一种特殊类型的选择器，在CSS2.1 的这一部分以及 Paged Media 模块的这一部分中都有描述。 While they are part of the CSS standard, they are not considered part of the Selectors standard or related standards, although, like jQuery selectors, they share a similar syntax.虽然它们是 CSS 标准的一部分，但它们不被视为选择器标准或相关标准的一部分，尽管与 jQuery 选择器一样，它们共享相似的语法。

While :first is also defined in jQuery , it functions very differently in jQuery than in a @page rule.虽然:first也在jQuery 中定义，但它在 jQuery 中的功能与在@page规则中非常不同。 The page you link to is obviously demonstrating jQuery's version.您链接到的页面显然是在展示 jQuery 的版本。 I would hesitate to call :first a valid selector more so a valid page selector or a jQuery selector because it's so context-sensitive, plus it obviously can't be used in a CSS stylesheet or document.querySelectorAll() .我会犹豫将:first称为一个有效的选择器，更确切地说是一个有效的页面选择器或一个jQuery 选择器，因为它对上下文非常敏感，而且它显然不能用于 CSS 样式表或document.querySelectorAll() 。

Like :first , :eq() and their related selectors are non-standard jQuery selectors.像:first 、 :eq()和它们相关的选择器是非标准的 jQuery 选择器。 They also function very differently to :first-child , :nth-child() , etc, so while you may be able to use those selectors to emulate them to some extent in CSS, they're not exactly the same (otherwise jQuery wouldn't have created the non-standard ones).它们的功能也与:first-child 、 :nth-child()等非常不同，因此虽然您可以使用这些选择器在 CSS 中在某种程度上模拟它们，但它们并不完全相同（否则 jQuery 不会'没有创建非标准的）。 See my answer to this question for an in-depth explanation.有关深入解释，请参阅我对这个问题的回答。

As mentioned, :contains() was going to be part of CSS but never made it.如前所述， :contains()将成为 CSS 的一部分，但从未实现。 It's emulated in jQuery anyway, but keep in mind that it may be expensive in terms of performance and/or not work as you might expect it to.无论如何，它在 jQuery 中被模拟，但请记住，它在性能方面可能很昂贵和/或不像您期望的那样工作。

Answer 2

Those are (mostly) valid selectors, albeit somewhat obscure.这些是（大部分）有效的选择器，尽管有些模糊。

:first

This is a selector for styling the first page of a document when printed.这是一个选择器，用于在打印时为文档的第一页设置样式。 Browser support seems iffy, at best.浏览器支持似乎充其量是不确定的。 See: https://developer.mozilla.org/en-US/docs/Web/CSS/:first请参阅： https : //developer.mozilla.org/en-US/docs/Web/CSS/ : first

In your example markup, it appears you want the first item styled, in which case you'd instead use :first-child see: https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child在您的示例标记中，您似乎希望为第一个项目设置样式，在这种情况下，您可以使用:first-child参见： https : //developer.mozilla.org/en-US/docs/Web/CSS/ :first-child -孩子

:eq(0)

This is a jQuery CSS selector.这是一个 jQuery CSS 选择器。 In pure CSS, you'd likely use :nth-child to do the same.在纯 CSS 中，您可能会使用:nth-child来做同样的事情。 See: http://api.jquery.com/eq-selector/见： http : //api.jquery.com/eq-selector/

:contains()

This selector was proposed, but never made it into the spec.这个选择器是被提议的，但从未被纳入规范。 See: Why doesn't the selector h3:nth-child(1):contains('a') work?请参阅：为什么选择器 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