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

56
css css-selectors

3 ответов

следующее будет соответствовать любому anchor с определил:

a[rel]
{
    color: red;
}

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

72

да в CSS 3 селекторов есть несколько селекторы атрибутов.

Э. Г.

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

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

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

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

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

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

32

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

например, я обнаружил, что в IE до 9 colSpan установлен для всех TD в таблице, поэтому любая одиночная ячейка имеет скрытое значение colspan 1.

поэтому, если вы нацеливали "любой TD с атрибутом colspan", вы применяете в своем webdoc, даже td, не имеющий набора атрибутов colspan, например, любой TD, являющийся одной ячейкой, получит стиль css. IE менее 9 будет в основном стиль их всех!

единственная причина для беспокойства об этом-все остальные пользователи XP, которые не могут обновиться выше IE8.

например, у меня есть группа таблиц, где содержимое может перемещаться из конца в конец, оставляя от 1 до 7 ячеек пустыми либо в конце, либо в начале.

Я хочу примените цвет к любым пустым ячейкам в конце или начале, используя атрибут colspan. Использование следующего не будет работать в IE менее 9

#my td[colspan] {background-color:blue;}

...все TD будут стилизованы (смешно, так как условный атрибут styling был предположительно выше в IE, но я отвлекаюсь...).

используя следующие работы во всех браузерах, когда я устанавливаю значение colspan в "single" для любой одиночной ячейки / TD, которую я хочу включить в схему стиля, однако его "hack" и не будет должным образом проверять...

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

1