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;
}
Author: Leandro Tupone, 2011-02-24
Source

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 .

 1018
Author: Sotiris,
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.

 91
Author: thomas.han,
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)

 21
Author: adroitec,
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

 3
Author: DKSan,
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