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引擎的实现，例如，某些浏览器无法识别某些伪类。