JavaScript/DOM - 「CSS選擇器」和屬性之間是否有區別？

Question

排除聲明事件處理程序：

<a href='#' onclick=<handler> ... />

是否有一個屬性和CSS選擇器之間的重大差異？如果我提供我自己的屬性：

<a href='#' my-data-node-type='1'/>

是「我的數據節點型」的屬性，一個CSS選擇器或兩者兼而有之？我認爲我真正要問的是，術語「屬性」和「CSS選擇器」是否同義？或者是一個「CSS選擇器」只有一個被CSS識別爲合適樣式的屬性？

Answer 1

CSS選擇器不是屬性。它們是用於決定在文檔中應用樣式的元素的模式。

來自W3C的：http://www.w3.org/TR/CSS2/selector.html

「在CSS中，模式匹配規則確定哪些樣式規則適用於文檔樹中的元素這些模式，稱爲選擇，可以從簡單的元素名稱與豐富的情境模式的範圍。 。如果模式中的所有條件對某個元素都是真的，則選擇器匹配該元素。「

對於您的情況，屬性名稱「my-data-node-type」可以用作CSS選擇器的一部分來引用鏈接，但CSS選擇器不是屬性。例如，屬性不是CSS的一部分，它們是您可以在HTML和其他類似標記語言的元素標記中找到的數據的名稱/值對。

<element my-attribute-name="my-attribute-value" /> 

這不是標準，但HTML維基百科頁面有屬性的一個不錯的簡單的語言描述：http://en.wikipedia.org/wiki/Html

例如，給出的HTML：

<div id="foo"> 
    <a data-node-type="foo" href="bar">Click me!</a> 
</div> 

「數據節點 - 類型「和」href「是<a>標籤的屬性，

# while: 
div#foo a[data-node-type=foo] 

# or: 
div a[href] 

# or simply: 
a 

...是CSS選擇器，其目標是<a>，前兩者使用其屬性。

Answer 2

css選擇器只是一種方式，即CSS標識要應用樣式的元素組。屬性是元素的屬性。

在你的例子中，my-data-node-type ='1'是一個屬性。然而，屬性可以用作css選擇器的一部分。一個[my-data-node-type =「1」]將選擇my-data-node-type = 1的所有'a'標籤。

Answer 3

在CSS文檔中使用CSS選擇器。它是通過元素名稱，id，css或其他選擇你想要設計的元素的字符串。

.myDiv, #myDivid是選擇器。

「我的數據節點型」可以用來選擇元素，#myDiv a[my-data-node-type='1']

屬性是你用什麼樣式元素本身。

#myDiv a[my-data-node-type='1'] 
{ 
    color: #000; /*this is an attribute*/ 
} 

希望這會有所幫助。

Answer 4

實際上，選擇器使用屬性（和標籤名稱）以及類和僞類。

選擇器是從通用到更具體的不同類型。

請參見：http://www.w3.org/TR/CSS2/selector.html

所以，你可以用你的屬性建立一個模式（選擇）的規則適用於它。 （或者如果使用像JQuery這樣的解析庫，在DOM中查找元素）。

您可以使用哪些選擇器取決於CSS引擎實現，有些瀏覽器無法識別某些僞類。