JavaScript/DOM - “CSS 选择器”和“CSS 选择器”之间有区别吗?和一个属性?

发布于 2024-11-30 09:12:35 字数 308 浏览 1 评论 0原文

排除声明性事件处理程序:

; ... />

属性和 CSS 选择器之间有什么实质性区别吗?如果我提供自己的属性:

是“my-data-node-type”属性,a CSS 选择器或两者兼而有之?我想我在这里真正要问的是,术语“属性”和“css 选择器”是同义词吗?或者“css 选择器”只是 CSS 识别为符合样式要求的属性吗?

Excluding declarative event handlers:

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

Is there any material difference between an Attribute and a CSS Selector? If I provide my own attribute:

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

Is "my-data-node-type" an attribute, a CSS Selector or both? I think what I'm really asking here is, are the terms "attribute" and "css selector" synonymous? Or is a "css selector" only an attribute recognized by CSS as eligible for styling?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

顾忌 2024-12-07 09:12:35

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>

“data-node-type”和“href”是 标记的属性,

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

# or:
div a[href]

# or simply:
a

...是 CSS 选择器,其目标是,前两个利用其属性。

CSS selectors are not attributes. They're patterns used to decide which elements to apply styles to in the document.

From the 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."

In your case, the attribute name "my-data-node-type" may be used as part of a CSS selector to reference your link, but a CSS selector is not an attribute. Attributes aren't part of CSS, they're the name/value pairs of data you'll find within element tags in HTML and other like markup languages, for example.

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

It's not the standard, but the HTML Wikipedia page has a nice plain language description of attributes: http://en.wikipedia.org/wiki/Html

For example, given the HTML:

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

"data-node-type" and "href" are the attributes of the <a> tag,

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

# or:
div a[href]

# or simply:
a

...are CSS selectors which would target that <a>, with the first two making use of its attributes.

殤城〤 2024-12-07 09:12:35

css 选择器只是 css 识别要应用样式的元素组的一种方式。属性是元素的属性。

在您的示例中, my-data-node-type='1' 是一个属性。然而,属性可以用作 css 选择器的一部分。 a[my-data-node-type="1"] 将选择 my-data-node-type=1 的所有“a”标签。

A css selector is just a way that css identifies groups of elements to apply styles to. An attribute is a property of an element.

In your example, my-data-node-type='1' is an attribute. Attributes can be used as part of css selectors however. a[my-data-node-type="1"] will select all 'a' tags with my-data-node-type=1.

不必在意 2024-12-07 09:12:35

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*/
}

希望这有帮助。

A CSS selector is used within the CSS document. It is the string which selects the element you wish to style, by element name, id, css or whatever else.

.myDiv, #myDivid are selectors.

"my-data-node-type" could be used to select your element, #myDiv a[my-data-node-type='1']

Attributes are what you use to style the element itself.

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

Hope this helps.

一抹淡然 2024-12-07 09:12:35

实际上选择器使用属性(和标签名称)以及类和伪类。

选择器有不同的类型,从通用的到更具体的。

请参阅:http://www.w3.org/TR/CSS2/selector.html

因此,您可以使用属性来构建一个模式(选择器)以对其应用规则。 (或者如果使用 JQuery 等解析库,则在 DOM 中查找元素)。

您可以使用哪些选择器在一定程度上取决于 CSS 引擎的实现,例如,某些浏览器无法识别某些伪类。

Actually selectors use attributes (and tag names) and classes and pseudo-classes.

Selectors are of different types from universal to more specific ones.

See: http://www.w3.org/TR/CSS2/selector.html

So you can use your attributes to build a pattern (a selector) to apply a rule to it. (Or to find the element in the DOM if using some parsing library like JQuery).

What selectors you can use depend a little on the CSS engine implementation, some browsers don't recognize some pseudo-classes for example.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文