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

Question

不包括聲明性事件處理程序：

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

屬性和CSS選擇器之間有什么實質區別嗎？ 如果我提供自己的屬性：

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

“ my-data-node-type”是屬性，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 Wikipedia頁面上有一個很好的簡單的屬性語言描述： http : //en.wikipedia.org/wiki/Html

例如，給定HTML：

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

“ data-node-type”和“ 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選擇器的一部分。 a [my-data-node-type =“ 1”]將選擇所有my-data-node-type = 1的'a'標簽。

Answer 3

CSS選擇器在CSS文檔中使用。 這是一個字符串，它通過元素名稱，id，css或其他來選擇要設置樣式的元素。

.myDiv, #myDivid是選擇器。

“ my-data-node-type”可用於選擇您的元素#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引擎的實現，例如，某些瀏覽器無法識別某些偽類。