Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menggayakan Elemen dengan Nama Kelas Bermula dengan Rentetan Khusus dalam CSS?

Bagaimanakah Saya Boleh Menggayakan Elemen dengan Nama Kelas Bermula dengan Rentetan Khusus dalam CSS?

Susan Sarandon
Susan Sarandonasal
2024-11-13 10:05:02983semak imbas

How Can I Style Elements with Class Names Starting with a Specific String in CSS?

Menggayakan Elemen dengan Nama Kelas Bermula dengan Rentetan Khusus

Dalam CSS3, adalah mungkin untuk menggunakan kad bebas untuk memadankan elemen yang nama kelasnya bermula dengan rentetan tertentu. Ini membolehkan anda menggayakan berbilang elemen dengan nama kelas yang serupa dengan cara yang ringkas dan cekap.

Pertimbangkan struktur HTML berikut:

<div class="myclass-one"></div>
<div class="myclass-two"></div>
<div class="myclass-three"></div>

Untuk menggayakan semua div ini dengan warna yang sama, kita boleh menggunakan peraturan CSS berikut:

div[class^='myclass'], div[class*=' myclass'] {
    color: #f00;
}

Begini cara peraturan ini berfungsi:

  • class^='myclass' sepadan dengan semua elemen yang nama kelasnya bermula dengan rentetan "myclass." Dalam kes ini, ia akan memilih tiga div yang dinyatakan di atas.
  • class*=' myclass' sepadan dengan semua elemen yang nama kelasnya mengandungi subrentetan "myclass" di mana-mana sahaja di dalamnya. Ia juga akan memilih tiga div.

Warna: #f00; sifat menetapkan warna semua elemen yang dipilih kepada merah.

Dengan menggunakan pendekatan kad bebas ini, anda boleh mengemas kini gaya berbilang elemen dengan nama kelas yang serupa dengan mudah tanpa perlu menentukan setiap nama kelas individu dalam peraturan CSS.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Elemen dengan Nama Kelas Bermula dengan Rentetan Khusus dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn