Dalam CSS, pemilih digunakan untuk memilih elemen mengikut nama kelas, id, tag, dsb. Terdapat juga beberapa pemilih kad bebas yang tersedia dalam CSS yang boleh kami gunakan untuk menentukan pertanyaan yang memilih elemen HTML.
Pemilih kad liar membolehkan kami memilih elemen HTML yang mengandungi subrentetan tertentu dalam nilai atribut tertentu (seperti kelas atau id). Dalam tutorial ini, kita akan belajar menggunakan *, ^ dan $ pemilih kad bebas untuk mewakili kelas dan id.
Pemilih kad bebas Mengandungi (*=) membenarkan pembangun mencari semua elemen HTML yang nilai atributnya mengandungi "rentetan" sebagai subrentetan. Contohnya, menggunakan pemilih kad bebas "*" pada kelas mencari semua elemen HTML yang nama kelasnya mengandungi rentetan itu.
Pengguna boleh menggunakan pemilih kad bebas yang mengandungi (*) untuk kelas mengikut sintaks berikut.
[class*="string"] {
}
Sintaks di atas memilih semua elemen HTML yang mengandungi "rentetan" sebagai subrentetan dalam nama kelas.
Dalam contoh di bawah, kami telah mencipta empat elemen div berbeza dan menambah teks di dalamnya berdasarkan nama kelasnya. Dalam CSS, kami menggunakan pemilih kad bebas "mengandungi" untuk memilih semua elemen div yang nama kelasnya mengandungi "ujian" sebagai subrentetan.
Dalam output, pengguna boleh melihat bahawa warna teks dua elemen div pertama adalah merah kerana ia mengandungi nama kelas dengan subrentetan "ujian".
<html>
<head>
<style>
[class*="test"] {
color: red;
font-size: 2rem;
}
</style>
</head>
<body>
<h2> Using the <i> contains (*=) </i> wildcard CSS selector in CSS. </h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "demo"> This is a text with the class name demo test. </div>
<div class = "element"> This is a text with the class name element.</div>
</body>
</html>
Bermula dengan (^=) pemilih kad bebas membolehkan kami memilih semua elemen HTML yang nilai atributnya bermula dengan subrentetan tertentu.
Pengguna boleh menggunakan pemilih bermula dengan aksara kad bebas untuk kelas mengikut sintaks berikut.
[class^="string"] {
}
Sintaks di atas memilih semua elemen HTML yang nama kelasnya bermula dengan "rentetan".
Dalam contoh di bawah, kami telah menggunakan pemilih CSS kad bebas bermula dengan (^=) dan kelas untuk memilih elemen berdasarkan nama kelas.
Dalam output, pengguna boleh melihat bahawa teks unsur div pertama dan ketiga bertukar menjadi biru kerana ia mengandungi rentetan "ujian" pada permulaan. Elemen div kedua mengandungi "ujian" dalam nama kelas, tetapi ia berada di hujung nama kelas dan oleh itu tidak dipilih oleh pemilih kad liar terkemuka (^=).
<html>
<head>
<style>
[class^="test"] {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h2> Using the <i> starts with (^=) </i> wildcard CSS selector in CSS </h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "testdemo"> This is a text with the class name testdemo test. </div>
<div class = "element"> This is a text with the class name element. </div>
</body>
</html>
Pemilih kad bebas yang berakhir dengan ($=) memilih semua elemen HTML jika nilai atribut tertentu mengandungi subrentetan pada penghujungnya. Sebagai contoh, jika nama kelas bagi dua elemen berbeza ialah "onestart" dan "lastone", dan subrentetan ialah "one", ia akan memilih elemen HTML dengan hanya nama kelas "lastone" kerana ia mengandungi End substring yang pertama. .
Pengguna boleh menggunakan pemilih CSS kad bebas yang berakhir dengan ($=) pada kelas mengikut sintaks berikut.
[class$="string"] {
}
Sintaks di atas memilih semua elemen HTML yang nama kelasnya berakhir dengan subrentetan "rentetan".
Dalam contoh di bawah, elemen div nd dan keempat mengandungi subrentetan "ujian" di hujung nilai nama kelas. Kami menggunakan pemilih CSS dengan kad bebas ($=) pada penghujungnya untuk memilih dua elemen div dan menggunakan sempadan, jidar dan padding padanya.
<html>
<head>
<style>
[class$="test"] {
border: 2px solid pink;
padding: 5px 10px;
margin: 5px;
}
</style>
</head>
<body>
<h2> Using the <i> ends with ($=) </i> wildcard CSS selector in CSS.</h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "testdemo"> This is a text with the class name testdemo test. </div>
<div class = "elementtest"> This is a text with the class name elementtest. </div>
</body>
</html>
Dalam contoh di bawah, kami menggunakan pemilih CSS yang berakhir dengan id dan bukannya menggunakan kelas sebagai atribut. Ia menunjukkan cara memilih elemen HTML menggunakan sifat lain dan pemilih CSS kad bebas.
Di sini kami memilih semua elemen HTML yang nilai idnya mengandungi "nama" pada penghujungnya dan menukar gaya dan warna fon.
<html>
<head>
<style>
[id$="name"] {
color: lightskyblue;
font-style: italic;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2> Using the <i> ends with ($=) </i> wildcard CSS selector in CSS.</h2>
<div id = "firstname"> id == firstname </div>
<div id = "lastname"> id == lastname </div>
<div id = "age"> id == age </div>
<div id = "namestart"> id == namestart </div>
</body>
</html>
Pengguna mempelajari cara menggunakan pemilih CSS kad bebas dengan kelas. Pengguna boleh menggunakan pemilih CSS mengandungi (*=) untuk mendapatkan elemen yang nilai atributnya mengandungi subrentetan di tengah dan menggunakan (^=) pemilih CSS untuk mendapatkan elemen yang nilai atributnya mengandungi subrentetan pada permulaan dan berakhir dengan ($ ). =) Penghujungnya.
Selain itu, pengguna mempelajari cara menggunakan pemilih CSS kad bebas dengan sifat lain, seperti id dalam contoh sebelumnya.
Atas ialah kandungan terperinci Pemilih kad liar (*, ^ dan $) dalam CSS untuk kelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
