wildcard * di CSS untuk kelas

Saya memiliki div bahwa saya'm styling dengan .tocolor, tapi saya juga perlu pengenal unik 1,2,3,4 dll. jadi saya'm menambahkan bahwa sebagai kelas lain 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;
}

Apakah ada cara untuk memiliki hanya 1 kelas tocolor-*. Saya mencoba menggunakan wildcard * seperti dalam css ini, tapi itu tidak't bekerja.

.tocolor-*{
  background: red;
}
Leandro
Pertanyaan edit 1 Agustus 2013 в 1:14
Pemrograman
css wildcard css-selectors
24 Februari 2011 в 8:46
36 tayangan
Mengomentari pertanyaan (1)
Larutan

Yang anda butuhkan adalah yang disebut atribut selector. Contoh, menggunakan struktur html anda, adalah sebagai berikut: 

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

Di tempat div anda dapat menambahkan elemen atau menghapus sama sekali, dan di tempat kelas anda dapat menambahkan atribut tertentu elemen.

[kelas^="tocolor-"] — dimulai dengan "tocolor-". [class*=" tocolor-"] — mengandung substring "tocolor-" yang terjadi secara langsung setelah karakter ruang.

Demo: http://jsfiddle.net/K3693/1/

Informasi lebih lanjut tentang CSS atribut selector, anda dapat menemukan di sini dan di sini. Dan dari MDN Docs MDN Docs

davidhartman00
Jawaban edit 22 November 2018 в 12:29
Komentar (5)

Ya, anda bisa ini.

*[id^='term-']{
    [css here]
}

Ini akan memilih semua id yang dimulai dengan &#39;istilah-&#39;.

Adapun alasan untuk tidak melakukan hal ini, saya melihat di mana itu akan lebih baik untuk memilih cara ini, seperti untuk gaya, saya tidak't melakukannya sendiri, tapi itu's mungkin.

user3071284
Jawaban edit 9 Februari 2017 в 4:27
Komentar (1)

Alternatif solusi:

div[kelas|=&#39;tocolor&#39;] akan cocok untuk nilai-nilai dari "kelas" atribut yang dimulai dengan "tocolor-" seperti "tocolor-1", "tocolor-2", dll.

Hati-hati bahwa ini tidak't pertandingan 

<div class="foo tocolor-">

Referensi: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

Merupakan unsur dengan att atribut, nilai baik yang sebenarnya "val" atau awal dengan "val" segera diikuti oleh "-" (U+002D)

PierreDuc
Jawaban edit 25 September 2019 в 1:37
Komentar (3)

Jika anda don't perlu pengenal unik untuk gaya lebih lanjut dari divs dan menggunakan HTML5 anda bisa mencoba dan pergi dengan kustom Data Atribut. Baca di sini atau mencoba pencarian google untuk HTML5 Custom Data Atribut

Komentar (0)