Nie da się tego zrobić w CSS2.1, ale jest to możliwe dzięki selektorom dopasowania podciągów atrybutów CSS3 (które są obsługiwane w IE7 +):
div[class^="status-"], div[class*=" status-"]
Zwróć uwagę na spację w drugim selektorze atrybutu. Spowoduje to pobranie div
elementów, których class
atrybut spełnia jeden z następujących warunków:
[class^="status-"]
- zaczyna się od „status-”
[class*=" status-"]
- zawiera podciąg „status-” występujący bezpośrednio po znaku spacji. Nazwy klas są oddzielane spacjami zgodnie ze specyfikacją HTML , stąd znaczący znak spacji. To sprawdza wszystkie inne klasy po pierwszej, jeśli określono wiele klas, i dodaje premię polegającą na sprawdzeniu pierwszej klasy w przypadku, gdy wartość atrybutu jest dopełniona spacjami (co może się zdarzyć w przypadku niektórych aplikacji, które generują class
atrybuty dynamicznie).
Oczywiście działa to również w jQuery, jak pokazano tutaj .
Powodem, dla którego musisz połączyć dwa selektory atrybutów, jak opisano powyżej, jest to, że selektor atrybutu, taki jak, [class*="status-"]
będzie pasował do następującego elementu, co może być niepożądane:
<div id='D' class='foo-class foo-status-bar bar-class'></div>
Jeśli możesz zapewnić, że taki scenariusz nigdy się nie wydarzy, możesz skorzystać z takiego selektora ze względu na prostotę. Jednak powyższa kombinacja jest znacznie bardziej niezawodna.
Jeśli masz kontrolę nad źródłem HTML lub aplikacją generującą znaczniki, prościej może być po prostu uczynić status-
prefiks własną status
klasą zamiast, jak sugeruje Gumbo .
status-
i nie chcesz jej dopasowywać, selektor staje się jeszcze bardziej skomplikowany: dodatkowodiv[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-)
tracisz obsługę IE7 / IE8. Na szczęście, jeśli Twój znacznik jest rozsądny, nie będziesz musiał wykluczać takiej klasy.[class*=" anim-overlay-"] a:hover:after{...}
. Kim są klasy CSSanim-overlay-1
,anim-overlay-2
.....anim-overlay-8
.anim-overlay-*{...}
?Selektory atrybutów CSS pozwolą Ci sprawdzić atrybuty łańcucha. (w tym przypadku - nazwa klasy)
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
(wygląda na to, że ma status „rekomendacja” dla wersji 2.1 i 3)
Oto zarys tego, jak * myślę, że to działa:
[ ]
: to kontener dla złożonych selektorów, jeśli chcesz ...class
: „klasa” to atrybut, na który patrzysz w tym przypadku.*
: modyfikator (jeśli istnieje): w tym przypadku - „symbol wieloznaczny” oznacza, że szukasz DOWOLNEGO dopasowania.test-
: wartość (zakładając, że istnieje jeden) atrybutu - który zawiera ciąg „test-” (który może być cokolwiek)Na przykład:
Możesz być bardziej szczegółowy, jeśli masz dobry powód, także z elementem
ul[class*='test-'] > li { ... }
Próbowałem znaleźć skrajne przypadki, ale nie widzę potrzeby używania kombinacji
^
i*
- jak * dostaje wszystko ...przykład: http://codepen.io/sheriffderek/pen/MaaBwp
http://caniuse.com/#feat=css-sel2
Wszystko powyżej IE6 z radością będzie posłuszne. :)
zauważ, że:
[class] { ... }
Wybierze wszystko z klasą ...
źródło
[class*='test-']
dopasuje elementy takie jak<div class='foo-test-bar'>
. To jedyny skrajny przypadek, który wymaga połączenia ^ i *, jak opisano w mojej odpowiedzi. IE6 nie obsługuje selektorów atrybutów.Nie jest to możliwe w przypadku selektorów CSS. Ale możesz użyć dwóch klas zamiast jednej, np. Status i ważne zamiast statusu-ważne .
źródło
Nie możesz tego zrobić, nie. Istnieje jeden selektor atrybutu, który pasuje dokładnie lub częściowo do znaku -, ale nie zadziała tutaj, ponieważ masz wiele atrybutów. Jeśli nazwa klasy, której szukasz, zawsze byłaby pierwsza, możesz to zrobić:
Zwróć uwagę, że ma to na celu tylko wskazanie, który selektor atrybutu CSS jest najbliższy. Nie zaleca się zakładania, że nazwy klas zawsze będą na początku, ponieważ javascript może manipulować atrybutem.
źródło