Як націлити елементи на атрибут, який має якесь значення в CSS?

Question 1

Я знаю, що можу націлити елементи, які мають певний атрибут у 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атрибута.

Question 2

Далі буде відповідати будь-якому прив'язувальному тегу з 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/:не

Question 3

Так, у селекторах 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" - порожній рядок, то селектор нічого не представляє.

Question 4

Слід додати, що якщо браузер встановлює атрибут за замовчуванням, можливо, вам доведеться обійтись. Здається, це не проблема у «сучасних» браузерах, однак, це проблема, яку я вже бачив, тому обов’язково перевірте продуктивність між браузерами.

Наприклад, я виявив, що в IE до 9, colSpan встановлюється для всіх TD в таблиці, тому будь-яка окрема комірка має приховане значення colspan 1.

Отже, якщо ви націлювались на "будь-який TD з атрибутом colspan", який ви застосовуєте у своєму webdoc, навіть td, який не має атрибутів colspan, наприклад, будь-який TD, що є однією коміркою, отримає стиль css. Тобто менше 9-ти, в основному, всі їх створить!

Єдиною причиною для занепокоєння з цього приводу є всі інші користувачі XP, які не можуть оновити версію вище IE8.

Отже, наприклад, у мене є група таблиць, де вміст може переходити від кінця до кінця, залишаючи десь від 1 до 7 клітинок порожніми в кінці або на початку.

Я хочу застосувати колір до будь-яких порожніх комірок в кінці або на початку, використовуючи атрибут colspan. Використання наведеного нижче не буде працювати в IE менше 9

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

... всі TD будуть стилізовані (смішно, оскільки умовний атрибут стилю був нібито вищим в 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 в процесі, і я думаю, що єдиний правильний спосіб це зробити за допомогою вибіркових таблиць стилів.

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

(До речі, colspan просто ще не входить до специфікації css [станом на css3], тому цей приклад не видає помилки перевірки.)