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