Я читал, что HTML " логические атрибуты", такие как readonly, disabled, required (и т.д.) может быть пустым или иметь значение их имени. И люди, кажется, используют оба стиля (см. Как следует писать логические атрибуты?)...
Итак, кажется, что лучший способ разместить это - написать свой CSS как:
input[readonly], input[readonly="readonly"] {
}
Но есть более сжатый способ написать это? Возможно, с помощью какой-либо CSS3-селекторной магии? Я пробовал input[readonly*=""], но не повезло.
Как пишет @JoshC в комментарии, вы можете просто использовать input[readonly]. Этот селектор CSS (который не знает всех проблем сериализации разметки) соответствует элементу input, который имеет атрибут readonly, независимо от его значения. Требование XHTML (XML), которое каждая спецификация атрибута должно включать в себя значение, не влияет на это.
Логические значения в 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]