Analisis terperinci tentang ciri dan kelebihan pemilih lanjutan CSS

Analisis mendalam tentang ciri dan kelebihan pemilih lanjutan CSS

Pengenalan:
CSS ialah bahagian penting dalam pembangunan web, CSS boleh digunakan untuk menambah gaya dan reka letak pada halaman web. Pemilih ialah bahagian CSS yang sangat penting, yang menentukan elemen dalam halaman web yang menggunakan peraturan CSS. Dalam CSS, kami biasa dengan pemilih asas, pemilih hierarki, pemilih kelas pseudo, dsb. Sebagai tambahan kepada pemilih biasa ini, CSS juga menyediakan beberapa pemilih lanjutan Artikel ini akan menganalisis secara mendalam ciri dan kelebihan pemilih lanjutan CSS dan memberikan contoh kod khusus.

1. Pemilih Atribut
Pemilih atribut ialah pemilih yang boleh memilih elemen melalui atributnya. Ia boleh memilih elemen yang diperlukan berdasarkan nilai atributnya. Pemilih atribut mempunyai bentuk berikut:

1. [atribut]: Pilih elemen dengan atribut tertentu
2. [attribute=value]: Pilih elemen dengan nilai atribut yang ditentukan ​​
3. [attribute~=value]: Pilih elemen dengan atribut tertentu Elemen dengan nilai atribut. Nilai atribut ialah berbilang nilai yang dipisahkan oleh ruang
4. [attribute|=value]: Pilih elemen dengan nilai atribut yang ditentukan atau nilai atribut yang dipisahkan oleh "-"
5. [attribute^=value]: Pilih elemen bermula dengan nilai atribut yang ditentukan
6. [attribute$=value]: Pilih elemen yang berakhir dengan nilai atribut yang ditentukan
7. [attribute*=value]: Pilih elemen yang mengandungi atribut ditentukan Elemen nilai

Contoh kod:

/* 选择所有具有title属性的元素 */
[title] {
  color: blue;
}

/* 选择具有title属性且属性值为"example"的元素 */
[title="example"] {
  background-color: yellow;
}

/* 选择具有class属性且属性值包含"box"的元素 */
[class~="box"] {
  border: 1px solid black;
}

/* 选择具有id属性且属性值以"container"开头的元素 */
[id^="container"] {
  background-color: gray;
}

/* 选择具有href属性且属性值以".com"结尾的a元素 */
a[href$=".com"] {
  color: green;
}

/* 选择具有src属性且属性值包含"logo"的img元素 */
img[src*="logo"] {
  width: 100px;
  height: 100px;
}

2. Pemilih kelas pseudo struktur
Pemilih kelas pseudo struktur ialah pemilih yang memilih elemen berdasarkan hubungan kedudukannya dalam dokumen. Ia boleh memilih elemen anak pertama, elemen anak terakhir, elemen anak ke-n, dsb. Pemilih kelas pseudo struktur mempunyai bentuk berikut:

1. :first-child: Pilih elemen anak pertama elemen
2. :last-child: Pilih elemen anak terakhir elemen
3. :nth-child(n) : Pilih sub-elemen ke-n bagi elemen n boleh menjadi nombor tertentu, kata kunci (seperti "genap", "ganjil") atau formula (seperti "2n", "3n+1")
4. : pertama-. of-type: Pilih elemen pertama antara semua elemen jenis yang sama yang mempunyai elemen induk yang sama dengan elemen ini
5. :last-of-type: Pilih elemen terakhir antara semua elemen jenis yang sama yang mempunyai elemen induk yang sama sebagai elemen ini
6. :nth -of-type(n): Pilih elemen ke-n antara semua elemen jenis yang sama yang mempunyai elemen induk yang sama dengan elemen
7. :nth-last-child(n): Pilih ke-n elemen anak dari yang terakhir hingga elemen
8. ; Pemilih ialah pemilih yang digunakan untuk memilih bahagian tertentu elemen dan bukannya keseluruhan elemen. Ia boleh memilih kandungan di hadapan, di belakang, atau pada kedudukan tertentu sesuatu elemen, atau menjana beberapa kesan khas. Pemilih unsur pseudo biasa mempunyai bentuk berikut:

::sebelum: masukkan kandungan yang dijana sebelum kandungan elemen

::selepas: masukkan kandungan yang dijana selepas kandungan elemen

1. ::baris pertama: Pilih baris pertama kandungan elemen
2. ::selection: Gaya yang digunakan apabila teks dipilih
3. ::placeholder: Pilih teks pemegang tempat kawalan borang
Sampel kod:

5. /* 选择第一个子元素，并设置颜色为红色 */
   li:first-child {
     color: red;
   }
   
   /* 选择最后一个子元素，并设置背景颜色为黄色 */
   li:last-child {
     background-color: yellow;
   }
   
   /* 选择偶数序号的子元素，并设置颜色为绿色 */
   li:nth-child(even) {
     color: green;
   }
   
   /* 选择第三个子元素，并设置字体大小为20px */
   li:nth-child(3) {
     font-size: 20px;
   }
   
   /* 选择第一个p元素，并设置边框为1px实线红色 */
   p:first-of-type {
     border: 1px solid red;
   }
   
   /* 选择最后一个p元素，并设置边框为1px实线蓝色 */
   p:last-of-type {
     border: 1px solid blue;
   }
   
   /* 选择li的倒数第二个子元素，并设置背景颜色为灰色 */
   li:nth-last-child(2) {
     background-color: gray;
   }
   
   /* 选择同类型元素中倒数第一个元素，并设置颜色为橙色 */
   span:nth-last-of-type(1) {
     color: orange;
   }

   Salin selepas log masuk
   Ringkasan:
6. Melalui pemilih kelas pseudo struktur, pemilih atribut dan pemilih elemen pseudo, kami boleh memilih dan memproses elemen dalam halaman web dengan lebih fleksibel dan mencapai kawalan gaya yang lebih halus. Pemilih lanjutan ini menyediakan pembangun dengan lebih banyak pilihan dan keupayaan ekspresi gaya yang berkuasa, menjadikan aplikasi CSS dalam pembangunan web lebih kreatif dan fleksibel. Dalam pembangunan sebenar, penggunaan rasional pemilih lanjutan ini boleh meningkatkan kecekapan kerja dan kebolehbacaan kod dengan ketara.
(bilangan perkataan: 1500)

Atas ialah kandungan terperinci Analisis terperinci tentang ciri dan kelebihan pemilih lanjutan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!