我刚刚找到了以下 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>
<强> DEMO
最佳答案
您链接到的页面是错误的(提示对 W3Schools 的嘘声和 mock )。列出的选择器有 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 中模拟的，但请记住，它在性能方面可能会很昂贵，并且/或无法像您期望的那样工作。
关于html - CSS 选择器测试器有效性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22726443/