Могут ли CSS-селектор атрибутов для логических атрибутов писать более сжато?

Я читал, что HTML " логические атрибуты", такие как readonly, disabled, required (и т.д.) может быть пустым или иметь значение их имени. И люди, кажется, используют оба стиля (см. Как следует писать логические атрибуты?)...

Итак, кажется, что лучший способ разместить это - написать свой CSS как:

input[readonly], input[readonly="readonly"] {
}

(qaru.site/info/48757/...)

Но есть более сжатый способ написать это? Возможно, с помощью какой-либо CSS3-селекторной магии? Я пробовал input[readonly*=""], но не повезло.

Ответ 1

Как пишет @JoshC в комментарии, вы можете просто использовать input[readonly]. Этот селектор CSS (который не знает всех проблем сериализации разметки) соответствует элементу input, который имеет атрибут readonly, независимо от его значения. Требование XHTML (XML), которое каждая спецификация атрибута должно включать в себя значение, не влияет на это.

Ответ 2

Логические значения в HTML не нуждаются в фактическом значении. Они верны, если они существуют и ложны, если они этого не делают.

Однако в XHTML логические значения должны быть заданы как строка, содержащая имя набора атрибутов.

В HTML

<input ... readonly>

CSS

input[readonly] { ... }

В XHTML, который раздражает, и я хочу избежать любой ценой

<input ... readonly="readonly" />

<ы > CSS

input[readonly="readonly"] { ... }

Изменить:. Как отмечают многие люди, вы можете написать только readonly в XHTML CSS, поскольку совпадение с существованием атрибута будет работать, даже если для атрибута установлено что-то вроде readonly="readonly".

CSS для XHTML тот же самый

input[readonly] { ... }

Если вы не используете CSS в документах XHTML и HTML, нет необходимости писать обе формы селектора. Просто придерживайтесь HTML с помощью <input readonly> и input[readonly]