Как настроить таргетинг на элементы с атрибутом, имеющим какое-либо значение в CSS?

Я знаю, что я могу настраивать элементы, которые имеют определенный атрибут в 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.

Ответ 1

Следующее будет соответствовать любому тегу привязки с определенным rel:

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

Обновление: чтобы учесть упомянутый сценарий @vsync, в разделе комментариев (различая emtpy/непустые значения), вы можете включить CSS :not псевдокласс:

a[rel]:not(a[rel=""])
{
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Ответ 2

Да в селекторах CSS 3 существует несколько селекторов атрибутов.

например.

[ATT]    Представляет элемент с атрибутом att, независимо от значения атрибута.

[ATT = значение]    Представляет элемент с атрибутом att, значение которого равно "val" .

[ATT ~ = значение]    Представляет элемент с атрибутом att, значение которого представляет собой список слов, разделенных пробелами, один из которых является точно "val" . Если "val" содержит пробелы, он никогда не будет представлять ничего (поскольку слова разделены пробелами). Также, если "val" - пустая строка, это никогда не будет представлять ничего.

[ATT ^ = значение]    Представляет элемент с атрибутом att, значение которого начинается с префикса "val" . Если "val" - это пустая строка, то селектор ничего не представляет.

[ATT $= значение]    Представляет элемент с атрибутом att, значение которого заканчивается суффиксом "val" . Если "val" - это пустая строка, то селектор ничего не представляют.

[ATT * = значение]    Представляет элемент с атрибутом att, значение которого содержит хотя бы один экземпляр подстроки "val" . Если "val" - пустое string, то селектор ничего не представляет.

Ответ 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, и я думаю, что единственный правильный способ сделать это - с помощью выборочных таблиц стилей.

В любом случае, большинство из нас уже делают это, но, тем не менее, вам все равно стоит подумать и проверить, применяет ли браузер автоатрибут, когда он его не видит, и как он может обрабатывать ваш остальной синтаксис для стилизации значений атрибутов.

(Кстати, colspan просто еще не указан в спецификации css [по состоянию на css3], поэтому в этом примере ошибка проверки не выдается.)