Mam te divy, z którymi projektuję .tocolor
, ale potrzebuję również unikalnego identyfikatora 1,2,3,4 itd., Więc dodaję to jako inną klasę 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ć symbolu wieloznacznego *
jak w tym css, ale to nie działało.
.tocolor-*{
background: red;
}
css
css-selectors
wildcard
świergot
źródło
źródło
Odpowiedzi:
To, czego potrzebujesz, nazywa się selektorem atrybutów. Przykład użycia struktury HTML jest następujący:
W miejsce
div
możesz dodać dowolny element lub całkowicie go usunąć, a zamiast tegoclass
możesz dodać dowolny atrybut określonego elementu.[class^="tocolor-"]
- zaczyna się od „tocolor-”.[class*=" tocolor-"]
- zawiera podciąg „tocolor-” występujący bezpośrednio po znaku spacji.Demo: http://jsfiddle.net/K3693/1/
Więcej informacji na temat selektorów atrybutów CSS można znaleźć tutaj i tutaj . I z MDN Docs MDN Docs
źródło
div[class*="foo"][class="bar"]
?class="foo tocolor-red"
dopasowanie, ale nieclass="foo fromtocolor-red-blue"
Tak, możesz to zrobić.
Spowoduje to wybranie wszystkich identyfikatorów zaczynających się od
'term-'
.Jeśli chodzi o powód, aby tego nie robić, widzę, gdzie lepiej byłoby wybrać ten sposób; jeśli chodzi o styl, nie zrobiłbym tego sam, ale jest to możliwe.
źródło
ID
oparty na dodatku, nie tylko zaclass
.Alternatywne rozwiązanie:
div[class|='tocolor']
będzie pasować do wartości atrybutu „class” zaczynających się od „tocolor-”, w tym „tocolor-1”, „tocolor-2” itp.Uważaj, że to nie będzie pasować
Odniesienie: https://www.w3.org/TR/css3-selectors/#attribute-representation
źródło
class
atrybut zaczyna się od innej klasy, która się nie zaczynatocolor
.foo*
, zrób toQLabel[objectName|='foo'] { ... }
Jeśli nie potrzebujesz unikalnego identyfikatora do dalszego stylowania div i używasz HTML5, możesz spróbować użyć niestandardowych atrybutów danych. Czytaj tutaj lub spróbuj wyszukać w Google
HTML5 Custom Data Attributes
źródło