Cara menggunakan pemilih untuk mengecualikan elemen dalam css

CSS ialah salah satu kemahiran penting dalam pembangunan bahagian hadapan Selain pemilihan asas elemen dan pengubahsuaian gaya, pemilihan dan pengecualian juga merupakan titik pengetahuan yang sangat penting dalam CSS. Artikel ini akan menerangkan pengecualian pemilihan dalam CSS dan menyediakan kes praktikal untuk rujukan.

Pengenalan kepada pemilih

Sebelum mempelajari tentang pemilihan dan pengecualian, mari kita fahami asas pemilih CSS terlebih dahulu.

Pemilih CSS digunakan untuk memilih elemen HTML. Dalam CSS, terdapat banyak jenis pemilih, seperti pemilih asas, pemilih hierarki, pemilih kelas pseudo, dll. Pemilih ini mempunyai kegunaan dan sintaks yang berbeza.

Berikut ialah beberapa jenis pemilih asas:

• Pemilih teg: Pilih mengikut nama teg elemen HTML, contohnya: kelas p{color:red}
• Pemilih: Pilih melalui atribut kelas elemen HTML, contohnya: .myclass{color:blue}
• Pemilih ID: Pilih melalui atribut ID elemen HTML, contohnya: #myid{color:green}
• Pemilih kad liar : Pilih semua elemen HTML, contohnya: *{color:pink}
• Pemilih atribut: Pilih mengikut nilai atribut elemen HTML, contohnya: [href="http://www.example.com"]{color:purple}

Oleh pemilih asas di atas Gabungan , kita boleh memilih elemen HTML dengan tepat dan mengubah suai gayanya melalui CSS.

Pilih untuk mengecualikan

Kadangkala kita bukan sahaja perlu memilih elemen, tetapi juga perlu mengecualikan beberapa elemen Pada masa ini, pemilihan untuk dikecualikan sangat berguna.

Terdapat beberapa cara untuk mengecualikan pemilihan dalam CSS:

• :bukan kelas pseudo
• :kelas pseudo anak pertama
• : kelas pseudo kanak-kanak terakhir
• : kelas pseudo anak tunggal

Mari kita perkenalkan mereka secara bergilir.

:not pseudo-class

:not pseudo-class digunakan untuk mengecualikan elemen tertentu Melalui sintaks mudah, kita boleh mengecualikan elemen yang ditentukan dalam pemilih.

Sebagai contoh, jika kita ingin memilih semua p elemen, tetapi mengecualikan elemen dengan p dalam elemen class="no", kita boleh menggunakan sintaks berikut:

p:not(.no){color:blue}

Dengan cara ini Semua elemen p boleh dipilih dengan tepat, tetapi elemen dengan class="no" dikecualikan dan warna fon teksnya ditukar kepada biru.

:kelas pseudo anak pertama

:kelas pseudo anak pertama menunjukkan pemilihan elemen anak pertama dan juga boleh digunakan untuk mengecualikan elemen tertentu.

Sebagai contoh, jika kita ingin memilih elemen anak pertama li daripada semua elemen a, tetapi mengecualikan elemen dengan class="no", kita boleh menggunakan sintaks berikut:

li > a:first-child:not(.no){color:blue}

Ini akan memilih dengan tepat elemen anak pertama li daripada semua a elemen, tetapi mengecualikan elemen dengan class="no" dan menukar warna fon teksnya kepada biru.

:kelas pseudo anak terakhir

:kelas pseudo anak terakhir menunjukkan pemilihan elemen anak terakhir dan juga boleh digunakan untuk mengecualikan elemen tertentu.

Sebagai contoh, jika kita ingin memilih elemen anak terakhir ul daripada semua elemen li, tetapi mengecualikan elemen dengan class="no", kita boleh menggunakan sintaks berikut:

ul > li:last-child:not(.no){color:blue}

Dengan cara ini, anda boleh memilih dengan tepat elemen anak terakhir ul daripada semua elemen li, tetapi kecualikan elemen dengan class="no" dan menukar warna fon teksnya kepada biru.

:kelas pseudo-anak tunggal

:kelas pseudo-anak tunggal bermaksud memilih elemen anak tunggal, dan juga boleh digunakan untuk mengecualikan elemen tertentu.

Sebagai contoh, jika kita ingin memilih semua div elemen, tetapi hanya memilih elemen anak unik p dan mengecualikan elemen dengan class="no", kita boleh menggunakan sintaks berikut:

div > p:only-child:not(.no){color:blue}

Dengan cara ini, anda boleh memilih satu-satunya elemen anak div daripada semua elemen p dengan tepat, tetapi kecualikan elemen dengan class="no" dan menukar warna fon teksnya kepada biru.

Kes Sebenar

Yang berikut menyediakan kes sebenar untuk menunjukkan cara menggunakan pengecualian pemilihan.

Perihalan kes: Terdapat menu bar navigasi yang dijana secara dinamik, beberapa daripadanya mempunyai menu lungsur turun Sekarang anda perlu menukar warna fon semua menu kepada merah, tetapi kecualikan menu dengan menu lungsur dan menu lungsur turun mereka.

Kod HTML:

<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品中心</a>
    <ul class="submenu">
      <li><a href="#">产品1</a></li>
      <li><a href="#">产品2</a></li>
      <li><a href="#">产品3</a></li>
    </ul>
  </li>
  <li><a href="#">解决方案</a></li>
  <li><a href="#">关于我们</a>
    <ul class="submenu">
      <li><a href="#">公司简介</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </li>
</ul>

Kod CSS:

.menu li > a:not(.submenu > li > a){
  color: red;
}

Penjelasan: Melalui kelas pseudo :not(), kita boleh menukar submenu Elemen > dan elemen li anaknya dikecualikan dan hanya semua submenu > li elemen anak elemen li dipilih dan warna fonnya ditukar kepada merah. a

Di atas adalah pengetahuan asas dan aplikasi praktikal pengecualian terpilih. Dalam pembangunan sebenar, pengecualian pemilihan ialah teknik yang sangat praktikal yang boleh membantu kami memilih elemen HTML dan mengubah suai gayanya dengan lebih cekap.

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