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

Question

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

Answer 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

Answer 2

Да, в селекторах 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» - пустая строка, то селектор ничего не представляет.

Answer 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], поэтому в этом примере не выдается ошибка проверки.)