CSS 選擇器測試器有效性
[英]CSS Selector Tester validity
問題描述
我剛剛找到了以下 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>
2 個解決方案
解決方案1
2 已采納 2014-03-29 09:19:15
您鏈接到的那個頁面是錯誤的（提示 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 中被模擬，但請記住，它在性能方面可能很昂貴和/或不像您期望的那樣工作。
解決方案2
0 2014-03-29 03:14:40
這些是（大部分）有效的選擇器，盡管有些模糊。
: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背景顏色有效期
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.