Jak określić elementy z atrybutem, który ma jakąkolwiek wartość w CSS?

Wiem, że mogę targetować elementy, które mają określony atrybut w CSS, na przykład:

input[type=text]
{
    font-family: Consolas;
}

Ale czy można wskazać elementy, które mają atrybut o dowolnej wartości (z wyjątkiem niczego, tj. Gdy atrybut nie został dodany do elementu)?

Z grubsza coś takiego:

a[rel=*]
{
    color: red;
}

Które powinny być kierowane na pierwszy i trzeci <a>tag w tym kodzie HTML:

<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>

cursor: pointerWydaje mi się, że jest to możliwe, ponieważ domyślnie wydaje się być stosowany do każdego <a>tagu, który ma wartość dla swojego hrefatrybutu.

Poniższy kod będzie pasował do dowolnego znacznika kotwicy ze relzdefiniowanym atrybutem:

a[rel]
{
    color: red;
}

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

Aktualizacja: Aby uwzględnić wspomniany scenariusz @vsync, w sekcji komentarzy (rozróżniając wartości puste / niepuste), możesz dołączyć :not pseudoklasę CSS :

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

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

Tak, w selektorach CSS 3 istnieje kilka selektorów atrybutów .

Na przykład

[att] Reprezentuje element z atrybutem att, niezależnie od wartości atrybutu.

[att = val] Reprezentuje element z atrybutem att, którego wartością jest dokładnie „val”.

[att ~ = val] Reprezentuje element z atrybutem att, którego wartością jest lista słów oddzielonych białymi znakami, z których jedno to dokładnie „val”. Jeśli „val” zawiera białe znaki, to nigdy nie będzie reprezentować niczego (ponieważ słowa są oddzielone spacjami). Również jeśli „val” jest pustym łańcuchem, nigdy nie będzie reprezentować niczego.

[att ^ = val] Reprezentuje element z atrybutem att, którego wartość zaczyna się od przedrostka „val”. Jeśli „val” jest pustym łańcuchem, to selektor niczego nie reprezentuje.

[att $ = val] Reprezentuje element z atrybutem att, którego wartość kończy się przyrostkiem „val”. Jeśli „val” jest pustym łańcuchem, to selektor niczego nie reprezentuje.

[att * = val] Reprezentuje element z atrybutem att, którego wartość zawiera co najmniej jedną instancję podciągu „val”. Jeśli „val” jest pustym łańcuchem, to selektor niczego nie reprezentuje.

Należy dodać, że jeśli przeglądarka domyślnie ustawia atrybut, może być konieczne obejście tego problemu. Wydaje się, że nie stanowi to problemu w „nowoczesnych” przeglądarkach, jednak jest to problem, który widziałem, więc koniecznie sprawdź wydajność różnych przeglądarek.

Na przykład odkryłem, że w IE przed 9, colSpan jest ustawiany dla wszystkich TD w tabeli, więc każda pojedyncza komórka ma ukrytą wartość colspan 1.

Więc jeśli celowałeś w "dowolny TD z atrybutem colspan", który zastosujesz w swoim webdoc, nawet td bez ustawionego atrybutu colspan, na przykład jakikolwiek TD będący pojedynczą komórką, otrzyma styl css. IE mniej niż 9 w zasadzie stylizuje je wszystkie!

Jedynym powodem do niepokoju są wszyscy pozostali użytkownicy XP, którzy nie mogą uaktualnić IE8 powyżej.

Na przykład mam grupę tabel, w których zawartość może się przesuwać od końca do końca, pozostawiając od 1 do 7 komórek pustych na końcu lub na początku.

Chcę zastosować kolor do pustych komórek na końcu lub na początku, używając atrybutu colspan. Korzystanie z poniższych elementów nie będzie działać w IE mniej niż 9

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

... wszystkie TD zostaną stylizowane (zabawne, ponieważ styl warunkowy atrybutów był podobno lepszy w IE, ale dygresję ...).

Korzystanie z następujących elementów działa we wszystkich przeglądarkach, gdy ustawię wartość colspan na „single” dla dowolnej pojedynczej komórki / TD, którą chcę uwzględnić w schemacie stylizacji, jednak jest to „hack” i nie zostanie poprawnie zweryfikowany ...

#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;}

Alternatywnie powinieneś być w stanie lepiej rozwiązać ten problem, używając stylów warunkowych, używając „if lt IE 9” do zastąpienia. Byłby to właściwy sposób, po prostu pamiętaj, że w trakcie tego procesu musisz ukryć „prawidłowo skonstruowany css” przed IElt9 i myślę, że jedynym właściwym sposobem jest użycie selektywnych arkuszy stylów.

Większość z nas i tak już to robi, ale mimo wszystko dobrze jest rozważyć i przetestować, czy przeglądarka stosuje atrybut automatyczny, gdy go nie widzi, i jak może obsłużyć twoją normalną składnię stylizacji wartości atrybutów.

(przy okazji, tak się składa, że ​​colspan nie znajduje się jeszcze w specyfikacji css [od css3], więc ten przykład nie zgłasza błędu walidacji.)