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: pointer
Wydaje 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 href
atrybutu.
źródło
empty
a[rel]:not( [rel=""] )
not
sztuczka kończy się brakiem dynamiki. Próbowałem to zrobić, aby podświetlićinput
pola, które miały wartości, a kiedy nie miały żadnych wartości, i wydaje się, że po załadowaniu strony styl nie jest ponownie oceniany, jeśli wartość jest wpisana (lub gdy jest na początku i jest usunięty).Tak, w selektorach CSS 3 istnieje kilka selektorów atrybutów .
Na przykład
źródło
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.)
źródło