Bagaimana untuk mengecualikan elemen dalam css

Dalam proses reka bentuk web, kita selalunya perlu menggunakan gaya CSS untuk mencapai pelbagai kesan. Tetapi dalam beberapa kes, kita mungkin perlu mengecualikan elemen, iaitu, tidak melakukan operasi gaya CSS pada elemen. Artikel ini akan memperkenalkan beberapa cara untuk mengecualikan elemen dalam CSS.

1 Gunakan :not selector
:not selector boleh memilih semua elemen kecuali elemen dalam kurungan. Sintaksnya adalah seperti berikut:

:not(选择器) {
  /* CSS 样式 */
}

Sebagai contoh, jika kita ingin memilih semua elemen div, tetapi mengecualikan elemen dengan kelas div dalam elemen exclude, maka kita boleh menulis:

div:not(.exclude) {
  /* CSS 样式 */
}

2. Use:nth-of-type() selector
:nth-of-type() selector boleh memilih elemen daripada jenis yang sama dan mengecualikan salah satu daripadanya berikut:

选择器:nth-of-type(n) /* 选中某个类型的元素的第 n 个 */
选择器:nth-of-type(-n) /* 选中除了靠后的 n 个之外的所有元素 */
选择器:nth-of-type(n - m) /* 选中第 n 到第 m 个 */

Sebagai contoh, jika kita ingin memilih semua div elemen, tetapi mengecualikan div kedua, maka kita boleh menulis seperti ini:

div:nth-of-type(n + 1):not(:nth-of-type(2)) {
  /* CSS 样式 */
}

3 . Gunakan nama kelas untuk mengecualikan elemen
Dalam HTML, tambahkan nama kelas unik pada elemen, dan kemudian pilih elemen lain kecuali nama kelas ini melalui gaya CSS. Kaedah ini lebih biasa digunakan, dan berbilang nama kelas boleh ditambah untuk pemilihan.

4. Gunakan pemilih kelas pseudo
Pemilih kelas pseudo dalam CSS ialah pemilih yang boleh menambah atribut khas pada elemen yang dipilih. Antaranya, :not() ialah pemilih kelas pseudo yang boleh mengecualikan elemen tertentu.

Sebagai contoh, jika kita ingin memilih semua elemen anak yang warna fon kedua berwarna merah di bawah elemen induk, tetapi tidak memasukkan elemen dengan kelas exclude, kita boleh menulis seperti ini:

div:nth-child(n) > :nth-child(2):not(.exclude) {
  color: red;
}

Ringkasnya, empat kaedah di atas boleh digunakan apabila mengecualikan elemen dalam gaya CSS Walaupun senario khusus untuk setiap kaedah mungkin berbeza, semuanya adalah penyelesaian praktikal yang boleh membantu kami menjadi lebih fleksibel dalam reka bentuk web Gaya CSS dengan bijak.

Atas ialah kandungan terperinci Bagaimana untuk mengecualikan elemen dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!