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

"В 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"являются атрибутами тега <a>,

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

# or:
div a[href]

# or simply:
a

... являются селекторами CSS, которые нацелены на <a>, причем первые два используют его атрибуты.

Answer 2

На самом деле селекторы используют атрибуты (и имена тегов), а также классы и псевдоклассы.

Селекторы бывают разных типов от универсальных до более специфических.

См .: http://www.w3.org/TR/CSS2/selector.html

Таким образом, вы можете использовать свои атрибуты для построения шаблона (селектора), чтобы применить к нему правило. (Или найти элемент в DOM, если используется какая-то библиотека синтаксического анализа, такая как JQuery).

То, какие селекторы вы можете использовать, немного зависит от реализации движка CSS, например, некоторые браузеры не распознают некоторые псевдоклассы.

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

Селектор css - это просто способ, с помощью которого css идентифицирует группы элементов, к которым применяются стили.Атрибут является свойством элемента.

В вашем примере, my-data-node-type = '1' является атрибутом.Однако атрибуты могут использоваться как часть селекторов CSS.a [my-data-node-type = "1"] выберет все теги 'a' с my-data-node-type = 1.