Блог

У меня есть следующий код, в котором я хочу покрасить текст в красный цвет для html-элементов с определенным свойством:

 .example1 {
  custom-property: blah
}

.example2 {
/* nothing */
}

[custom-property] {
  color: red;
}
 

 <p class="example1">
some text
</p>

<p class="example2" custom-property="blah">
this is also some text
</p>
 

Вот что я хочу, чтобы произошло. Все HTML-элементы, содержащие атрибут «пользовательское свойство», должны иметь содержимое красного цвета. Первый элемент абзаца является экземпляром класса example1 , что указывает на то , что все экземпляры должны иметь именно это поле «пользовательское свойство» в качестве атрибута. С другой стороны, во втором элементе абзаца это поле явно определено для данного экземпляра, а не в классе. Таким образом, оба элемента абзаца должны иметь атрибут «пользовательское свойство». (Я осознаю, что использую некоторые термины объектно-ориентированного программирования, поскольку я так думаю.)

Я использую селектор атрибутов для поиска всех экземпляров, которые имеют «пользовательское свойство» в качестве «поля» (т. Е. атрибута), которое должны иметь оба элемента абзаца. Тем не менее, селектор выбирает только тот экземпляр, в котором для этого элемента явно определено «пользовательское свойство», как показано здесь: вывод html

Так почему же селектор атрибутов не выбирает первый экземпляр? Конечно, они оба обладают одним и тем же свойством?

Я также считаю, что мой вопрос-это исследование того, как HTML и CSS работают под капотом и как они взаимодействуют. (Например, определяется ли «графика» тем, что находится в HTML или в CSS? Если CSS-это то, что определяет визуальные эффекты, почему я могу редактировать визуальные эффекты, редактируя атрибуты HTML? Или это тот случай, когда такие атрибуты HTML превращаются в «виртуальные» объявления CSS за кулисами? Я могу задать больше вопросов в этом направлении, но я ограничусь более простым вопросом, поставленным выше.)