Czy istnieje selektor CSS według prefiksu klasy?

Question

Czy istnieje selektor CSS według prefiksu klasy?

Chcę zastosować regułę CSS do każdego elementu, którego jedna z klas pasuje do określonego prefiksu.

Np. chcę regułę, która będzie miała zastosowanie do div, który ma klasę zaczynającą się od status- (A i C, ale nie B w poniższym fragmencie):

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

Pewnego rodzaju kombinacja:
div[class|=status] i div[class~=status-]

Czy da się to zrobić pod CSS 2.1? Czy jest to wykonalne pod dowolną specyfikacją CSS?

Uwaga: wiem, że mogę użyć jQuery do emulowania tego.

132

css css-selectors

Author: TylerH, 2010-07-27

Source

4 answers

Selektory atrybutów CSS pozwolą ci sprawdzić atrybuty Dla ciągu znaków. (w tym przypadku-nazwa klasy)

Https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Jest to jedna z najbardziej rozpoznawalnych marek na świecie.]}

Oto zarys tego, jak *myślę, że to działa:

[ ]: jest kontenerem dla selektorów złożonych ...
class : 'klasa' to atrybut patrzysz w tym przypadku.
*: modyfikator(jeśli istnieje): w tym przypadku - "wildcard" oznacza, że szukasz dopasowania.
test- : wartość (zakładając, że istnieje) atrybutu-który zawiera łańcuch "test -" (który może być czymkolwiek)

Więc, na przykład:

[class*='test-'] {
  color: red;
}

Możesz być bardziej konkretny, jeśli masz dobry powód, z elementem też

ul[class*='test-'] > li { ... }

Próbowałem znaleźć przypadki edge, ale nie widzę trzeba użyć kombinacji ^ i * - ponieważ * dostaje wszystko...

Przykład: http://codepen.io/sheriffderek/pen/MaaBwp

Http://caniuse.com/#feat=css-sel2

Wszystko powyżej IE6 będzie szczęśliwie posłuszne. : )

Zauważ, że:

[class] { ... }

Wybierze cokolwiek z klasą...

9

Author: sheriffderek,
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
2017-07-08 01:38:29

Nie jest to możliwe z selektorami CSS. Można jednak użyć dwóch klas zamiast jednej, np. status i important zamiast status-important.

6

Author: Gumbo,
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
2010-07-26 20:23:45

Nie możesz tego zrobić. Istnieje jeden selektor atrybutów , który pasuje dokładnie lub częściowo do znaku a, ale nie działa tutaj, ponieważ masz wiele atrybutów. Jeśli nazwa klasy, której szukasz, będzie zawsze pierwsza, możesz to zrobić:

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>

</body>
</html>

Zauważ, że jest to tylko po to, aby wskazać, który selektor atrybutów CSS jest najbliższy, nie zaleca się zakładania, że nazwy klas będą zawsze z przodu, ponieważ javascript może manipulować atrybutem.

2

Author: SBUJOLD,
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
2010-07-26 21:22:32

score 291 · Accepted Answer

Nie jest to możliwe z CSS2. 1, ale jest możliwe z selektorami dopasowującymi podcięcia atrybutów CSS3 (które są obsługiwane w IE7+):

div[class^="status-"], div[class*=" status-"]

Zwróć uwagę na znak spacji w drugim selektorze atrybutów. To wybiera div elementy, których atrybut class spełnia jeden z tych warunków:

[class^="status-"] - zaczyna się od "status -" (oczywiście).
[class*=" status-"] - zawiera podłańcuch " status-" występujący bezpośrednio po znaku spacji. Klasa nazwy są oddzielone białymi spacjami zgodnie ze specyfikacją HTML , stąd znak spacji znaczącej. To sprawdza wszystkie inne klasy po pierwszej, jeśli podano wiele klas, i dodaje bonus sprawdzania pierwszej klasy w przypadku, gdy wartość atrybutu jest wypełniona spacjami (co może się zdarzyć w niektórych aplikacjach, które generują atrybuty class dynamicznie).

Oczywiście działa to również w jQuery, jak pokazano tutaj .

The reason you trzeba połączyć dwa selektory atrybutów, jak opisano powyżej, ponieważ selektor atrybutów, 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 mieć pewność, że taki scenariusz nigdy się nie wydarzy, to możesz używać takiego selektora ze względu na prostotę. Jednak powyższe połączenie jest znacznie bardziej wytrzymałe.

Jeśli masz kontrolę nad źródłem HTML lub aplikacją generującą znaczniki, może być łatwiej tworzy przedrostek status- własną klasę status zamiast , jak sugeruje Gumbo.