Contoh kad bebas pemilih CSS biasa untuk dikuasai

Untuk menguasai contoh kad bebas pemilih CSS biasa, contoh kod khusus diperlukan

Pemilih CSS ialah bahagian yang sangat penting dalam pembangunan web, yang membolehkan kami memilih dan menggayakan elemen HTML berdasarkan atribut elemen yang berbeza. Antara pemilih CSS, kad bebas ialah pemilih yang sangat berguna yang boleh memadankan sebarang jenis elemen HTML. Dalam artikel ini, kami akan memperkenalkan kad bebas CSS yang biasa digunakan dan memberikan contoh kod khusus.

1. Wildcard (*)

Kad bebas "*" mewakili pemilihan semua elemen HTML. Ia boleh digunakan untuk menetapkan gaya global, atau dalam beberapa kes untuk memilih elemen tertentu.

Contoh kod:

/*选择所有的HTML元素并设置字体颜色为红色*/
* {
  color: red;
}

2. Pemilih jenis (elemen)

Pemilih jenis merujuk kepada kaedah yang menggunakan nama tag HTML sebagai pemilih. Biasanya digunakan untuk memilih jenis elemen HTML tertentu.

Contoh kod:

/*选择所有的段落元素（<p>）并设置字体大小为16像素*/
p {
  font-size: 16px;
}

3. Pemilih ID (#id)

Pemilih ID merujuk kepada kaedah yang menggunakan atribut ID elemen HTML sebagai pemilih. Atribut ID adalah unik dan hanya boleh digunakan sekali dalam dokumen HTML.

Contoh kod:

/*选择id为“myDiv”的元素并设置背景颜色为蓝色*/
#myDiv {
  background-color: blue;
}

4. Pemilih kelas (.class)

Pemilih kelas merujuk kepada kaedah yang menggunakan atribut kelas elemen HTML sebagai pemilih. Elemen HTML boleh menggunakan berbilang kelas dan kelas boleh digunakan semula dalam berbilang elemen HTML.

Contoh kod:

/*选择class为“myClass”的元素并设置字体样式为斜体*/
.myClass {
  font-style: italic;
}

5. Pemilih atribut ([atribut])

Pemilih atribut merujuk kepada kaedah yang menggunakan atribut elemen HTML sebagai pemilih. Gunakan pemilih atribut untuk memilih elemen HTML dengan atribut khusus.

Contoh kod:

/*选择具有src属性的图像元素，并设置边框为1像素实线*/
img[src] {
  border: 1px solid;
}

6. Pemilih nilai atribut ([attribute=value])

Pemilih nilai atribut merujuk kepada memilih elemen HTML dengan nilai atribut tertentu. Elemen boleh dipilih dengan gabungan nama atribut dan nilai atribut.

Contoh kod:

/*选择所有href属性值为“https://example.com”的链接元素并设置颜色为绿色*/
a[href="https://example.com"] {
  color: green;
}

7. keturunan moyang

Pemilih keturunan digunakan untuk memilih unsur keturunan unsur. Unsur keturunan boleh menjadi unsur yang bersarang di dalam unsur lain.

Contoh Kod:

/*选择ul元素内的所有li元素并设置字体粗体*/
ul li {
  font-weight: bold;
}

8. Pemilih Bersebelahan (sebelum + seterusnya)

Pemilih Bersebelahan digunakan untuk memilih elemen sejurus selepas elemen lain. Elemen yang dipilih mesti mempunyai elemen induk yang sama seperti elemen sebelumnya.

Contoh kod:

/*选择紧接在h1元素后的p元素并设置颜色为红色*/
h1 + p {
  color: red;
}

Di atas ialah contoh kad bebas pemilih CSS yang biasa digunakan, saya harap contoh kod khusus ini dapat membantu anda memahami cara menggunakan pemilih CSS. Sama ada anda memilih elemen global atau memilih elemen berdasarkan nilai atribut tertentu, menguasai pemilih ini akan menjadikan pembangunan web anda berfungsi dengan lebih cekap.

Atas ialah kandungan terperinci Contoh kad bebas pemilih CSS biasa untuk dikuasai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!