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

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

a[rel]
{
    color: red;
}

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

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

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

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

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

Например

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

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

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

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

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

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

Следует добавить, что если браузер устанавливает атрибут по умолчанию, вам, возможно, придется работать. Это не похоже на проблему в «современных» браузерах, однако это проблема, которую я видел, поэтому обязательно проверьте кроссбраузерность.

Например, я обнаружил, что в 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], поэтому этот пример не вызывает ошибки проверки.)