wildcard * w CSS dla klas
Mam te divy, które stylizuję .tocolor
, ale potrzebuję też unikalnego identyfikatora 1,2,3,4 itp. dodaję więc, że to kolejna klasa tocolor-1
.
<div class="tocolor tocolor-1"> tocolor 1 </div>
<div class="tocolor tocolor-2"> tocolor 2 </div>
<div class="tocolor tocolor-3"> tocolor 3 </div>
<div class="tocolor tocolor-4"> tocolor 4 </div>
.tocolor{
background: red;
}
Czy istnieje sposób, aby mieć tylko 1 klasę tocolor-*
. Próbowałem użyć wildcard *
jak w tym css, ale nie zadziałało.
.tocolor-*{
background: red;
}
4 answers
To, czego potrzebujesz, to selektor atrybutów. Przykład, używając struktury html, jest następujący:
div[class^="tocolor-"], div[class*=" tocolor-"] {
color:red
}
W miejscu div
można dodać dowolny element lub usunąć go całkowicie, a w miejscu class
można dodać dowolny atrybut określonego elementu.
[class^="tocolor-"]
- zaczyna się od " tocolor -".[class*=" tocolor-"]
- zawiera podłańcuch "tocolor -" występujący bezpośrednio po znaku spacji.
Demo: http://jsfiddle.net/K3693/1/
Więcej informacje o SELEKTORACH atrybutów CSS można znaleźć tutaj i tutaj .
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-02-10 23:57:05
Tak, możesz to zrobić.
*[id^='term-']{
[css here]
}
Spowoduje wybranie wszystkich identyfikatorów zaczynających się od 'term-'
.
Jeśli chodzi o powód, dla którego tego nie robię, to widzę, gdzie lepiej byłoby wybrać ten sposób; co do stylu, sam bym tego nie zrobił, ale jest to możliwe.
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-02-09 16:27:27
Alternatywne rozwiązanie:
div[class|='tocolor']
dopasuje wartości atrybutu "class" zaczynające się od "tocolor-", w tym "tocolor-1", "tocolor-2", itd.
Uważaj, że to nie będzie pasować `
Odniesienie: https://www.w3.org/TR/css3-selectors/#attribute-representation
[att|=val]
Reprezentuje element z atrybutem att, jego wartość albo jest dokładnie "val", albo zaczyna się od" val", po którym następuje "-" (U + 002D)
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-02-10 23:50:55
Jeśli nie potrzebujesz unikalnego identyfikatora do dalszej stylizacji Div I używasz HTML5, możesz spróbować użyć niestandardowych atrybutów danych. Przeczytaj Tutaj lub spróbuj wyszukać w google HTML5 Custom Data Attributes
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
2011-02-24 20:55:02