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

Wiem, że mogę kierować elementy, które mają specyficzny atrybut w CSS, na przykład: 

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

Ale czy możliwe jest targetowanie elementów, które mają atrybut o dowolnej wartości (poza niczym, tzn. gdy atrybut nie został dodany do elementu)?

Mniej więcej tak: 

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

Które powinny kierować pierwszy i trzeci znacznik <a> w tym HTML: 

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

Domyślam się, że jest to możliwe, ponieważ domyślnie cursor: pointer wydaje się być stosowane do dowolnego <a> znacznik, który ma wartość dla atrybutu href.

Author: Marty, 2012-02-14
Source

3 answers

Poniższe dopasuje dowolny anchor z zdefiniowanym atrybutem rel: 

a[rel]
{
    color: red;
}

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

 72
Author: xandercoded,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-14 03:49:32

Tak W SELEKTORACH CSS 3 jest kilka selektorów atrybutów .

Np.

[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 oddzielona białymi znakami lista słów, z których jeden jest dokładnie "val". Jeśli "val" zawiera białe spacje, nigdy niczego nie będzie reprezentować (ponieważ słowa są oddzielone spacjami). Również jeśli" val " jest pustym łańcuchem, to nigdy niczego nie będzie reprezentować.

[att^ = val] Reprezentuje element z atrybutem att, którego wartość zaczyna się od prefiksu "val". Jeżeli" val " jest pustym łańcuchem to selektor nic nie reprezentuje.

[att$ = val] Reprezentuje element z atrybutem att, którego wartość kończy się przyrostkiem "val". Jeżeli" val " jest pustym łańcuchem to selektor robi niczego nie reprezentuję.

[att* = val] Przedstawia element z atrybutem att, którego wartość zawiera co najmniej jedną instancję podłańcucha "val". Jeśli" val " jest puste string wtedy selektor niczego nie reprezentuje.

 32
Author: Daff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-14 03:51:18

Należy dodać, że jeśli przeglądarka ustawia domyślnie atrybut, może być konieczne obejście. Nie wydaje się to problemem w "nowoczesnych" broserach, jednak jest to problem, który widziałem, więc pamiętaj, aby sprawdzić wydajność między przeglądarkami.

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

Więc jeśli targetujesz "dowolny TD z atrybutem colspan" stosujesz w swoim webdoc, nawet td nie ma ustawionego atrybutu colspan, tak jak każdy TD będący pojedynczą komórką, otrzyma styl css. IE mniej niż 9 będzie w zasadzie styl je wszystkie!

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

Więc na przykład, mam grupę tabel, w których zawartość może przesuwać się 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 dowolnych pustych komórek w koniec lub początek używając atrybutu colspan. Korzystanie z następujących nie będzie działać w IE mniej niż 9 

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

...wszystkie TD będą stylizowane (zabawne, ponieważ stylizacja atrybutów warunkowych była podobno lepsza w IE, ale dygresję...).

Korzystanie z poniższego działa we wszystkich przeglądarkach, gdy ustawiam wartość colspan na "single" dla każdej samotnej komórki / TD, którą chcę uwzględnić w schemacie stylizacji, jednak jest to "hack" i nie będzie poprawnie / align = "left" / ..

#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ć problem za pomocą stylu warunkowego, używając "if lt IE 9" do nadpisania. To byłby właściwy sposób, aby to zrobić, po prostu pamiętaj, że musisz ukryć "poprawnie skonstruowany css" przed IElt9 w procesie, i myślę, że jedynym właściwym sposobem, aby to zrobić, jest selektywne arkusze stylów.

Większość z nas i tak już to robi, ale niezależnie od tego, nadal dobrze jest rozważyć i przetestować, czy przeglądarka stosuje auto-atrybut, gdy nie widzi żadnego, i jak może obsługiwać składnię w przeciwnym wypadku corect do stylizacji wartości atrybutów.

(btw, colspan nie jest jeszcze w specyfikacji css [od css3], więc ten przykład nie powoduje błędu walidacji.)

 1
Author: TwoHawks,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-04 21:45:09