JavaScript/DOM - "CSS Selector"和属性之间有区别吗？

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

"In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns, called selectors, may range from simple element names to rich contextual patterns. If all conditions in the pattern are true for a certain element, the selector matches the element."

在您的情况下，属性名称“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>

"data-node-type"和 "href"是 <a> 的属性标记，

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

# or:
div a[href]

# or simply:
a

...是针对 <a> 的 CSS 选择器, 前两个使用它的属性。