Я знаю, что могу настроить таргетинг на элементы, которые имеют определенный атрибут в CSS, например:
input[type=text]
{
font-family: Consolas;
}
Но возможно ли нацелить элементы, у которых есть атрибут любого значения (кроме ничего, т.е. когда атрибут не был добавлен к элементу)?
Примерно что-то вроде:
a[rel=*]
{
color: red;
}
Что должно быть нацелено на первый и третий <a>теги в этом HTML:
<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>
Я полагаю, что это возможно, потому что по умолчанию, cursor: pointerпохоже, применяется к любому <a>тегу, у которого есть значение для его hrefатрибута.
css
css-selectors
Марти
источник
источник
emptya[rel]:not( [rel=""] )notуловка оказывается нединамичной. Я попытался сделать это, чтобы выделитьinputполя, когда у них были значения, а не когда они не имели значений, и кажется, что после загрузки страницы стиль не переоценивается, если значение введено (или когда оно начинается с и он удален).Да, в селекторах CSS 3 есть несколько селекторов атрибутов .
Например
источник
Следует добавить, что если браузер устанавливает атрибут по умолчанию, вам, возможно, придется работать. Это не похоже на проблему в «современных» браузерах, однако это проблема, которую я видел, поэтому обязательно проверьте кроссбраузерность.
Например, я обнаружил, что в IE до 9 colSpan установлен для всех TD в таблице, поэтому любая отдельная ячейка имеет скрытое значение colspan равное 1.
Итак, если вы нацеливались на «любой TD с атрибутом colspan», который вы применяете в своем веб-документе, даже td, у которого не установлен атрибут colspan, например, любой TD, являющийся одной ячейкой, получит стиль css. IE меньше 9 будет стилизовать их всех!
Единственная причина для беспокойства - это все оставшиеся пользователи XP, которые не могут обновиться до IE8.
Так, например, у меня есть группа таблиц, в которых содержимое может сдвигаться из конца в конец, оставляя от 1 до 7 ячеек пустыми либо в конце, либо в начале.
Я хочу применить цвет к любым пустым ячейкам в конце или в начале, используя атрибут colspan. Использование следующего не будет работать в IE ниже 9
#my td[colspan] {background-color:blue;}... все TD будут стилизованы (забавно, поскольку условный стиль атрибута предположительно был лучше в IE, но я отвлекся ...).
Следующее работает во всех браузерах, когда я устанавливаю значение colspan равным 'single' для любой отдельной ячейки / TD, которую я хочу включить в схему стилей, однако это `` взлом '' и не будет должным образом проверять ...
#my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */ #my td[colspan="2"] {background-color:blue;} #my td[colspan="3"] {background-color:blue;} #my td[colspan="4"] {background-color:blue;} #my td[colspan="5"] {background-color:blue;} #my td[colspan="6"] {background-color:blue;} #my td[colspan="7"] {background-color:blue;}В качестве альтернативы вы должны иметь возможность более адекватно решить проблему, используя условный стиль, используя для переопределения «if lt IE 9». Это был бы правильный способ сделать это, просто имейте в виду, что вы должны скрыть «правильно сконструированный css» от IElt9 в процессе, и я думаю, что единственный правильный способ сделать это - использовать выборочные таблицы стилей.
Большинство из нас уже делает это в любом случае, но, тем не менее, вам все равно следует подумать и проверить, применяет ли браузер автоматический атрибут, когда он не видит его, и как он может обрабатывать ваш синтаксис corect для стилизации значений атрибутов.
(кстати, colspan просто еще нет в спецификации css [по состоянию на css3], поэтому этот пример не вызывает ошибки проверки.)
источник