Apakah pemilih kontekstual dalam CSS?-tutorial css-php.cn

Apakah pemilih kontekstual dalam CSS?

WBOY

Lepaskan： 2023-08-26 20:29:19

ke hadapan

954 orang telah melayarinya

CSS 中的上下文选择器是什么？

Pemilih kontekstual membenarkan pembangun memilih jenis gaya yang berbeza untuk bahagian dokumen yang berlainan. Dalam CSS, pembangun boleh menentukan gaya secara langsung atau dengan mencipta kelas tertentu untuk menentukan gaya. Pemilih kontekstual hanya akan menggunakan gaya pada elemen tertentu. Hubungan ibu bapa-anak antara elemen dalam dokumen boleh dipanggil konteks. Pemilih konteks akan mempunyai 2 atau lebih pemilih berasingan.

Dalam artikel ini, kita akan mempelajari apa itu pemilih kontekstual dalam CSS dan cara menggunakannya.

Apakah pemilih kontekstual dan mengapa kami menggunakannya?

Pemilih konteks mengandungi dua pemilih seperti kelas atau id, ini dipanggil pemilih mudah. Mari lihat sintaks pemilih konteks supaya kita memahami maksudnya dan cara menggunakannya.

Tatabahasa

div{color: blue}
span{color: green}

Salin selepas log masuk

Dalam sintaks di atas, anda dapat melihat bahawa kami menggunakan mana-mana pemilih mudah, dipisahkan dengan ruang. Kami boleh menggunakan mana-mana sifat CSS pada mana-mana elemen khusus yang kami mahu gayakan, dan gaya itu akan digunakan pada semua elemen dengan konteks dalam keseluruhan dokumen HTML. Mari kita lihat output untuk memahami pemilih dengan lebih baik.

Contoh

Kaedah - Kami akan menggunakan tag div dengan 2 tag perenggan di dalamnya, yang bermaksud div akan menjadi elemen induk dan perenggan akan menjadi elemen anak. Kami akan menggunakan elemen induk untuk menukar warna elemen ini. Sekarang, mari kita lihat kodnya.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>An example of using the contextual selector</title>
   <style>
      div {
         color: yellow;
      }
      p {
         color: lightgreen;
      }
   </style>
</head>
<body>
   <div>
      <p>Hello everyone!!</p>
      <p>How is your day going?</p>
   </div>
   <p>A very good morning to all the readers</p>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas kami mencipta div dan kemudian menambah 2 perenggan (tag) di dalam div itu dan kemudian menambah satu lagi perenggan di luar elemen div, selepas itu kami pergi ke bahagian CSS dan menukar warna elemen div ialah "kuning " dan perenggan adalah "hijau muda", yang bermaksud bahawa semua elemen perenggan pada dokumen HTML akan mempunyai warna "hijau muda". Mari lihat output untuk memahami apa yang dilakukan oleh kod di atas.

Dalam output di atas, anda dapat melihat bahawa warna semua perenggan walaupun dalam div ialah "Hijau Muda". Tetapi bagaimana jika kita hanya mahu menukar warna satu perenggan di dalam elemen div? Anda mungkin tertanya-tanya cara menukar warna perenggan di dalam div, tetapi bukan warna perenggan di luar div.

Mari kita lihat cara lain pemilih konteks digunakan supaya kita memahami kepentingan sebenar pemilih konteks.

Sintaks

Gunakan pemilih kontekstual

div p{ color: lightgreen;}

Salin selepas log masuk

Dalam sintaks di atas, anda dapat melihat bahawa kami menyasarkan perenggan di dalam elemen div, bukan elemen di luar div.

Mari kita lihat contoh lain supaya kita boleh membayangkan sifat ini dengan lebih khusus.

Contoh

Di sini kami mencipta teg perenggan yang akan dikelilingi oleh teg div dan kami akan menetapkan warna perenggan itu supaya berbeza daripada perenggan di luar div. Sekarang mari kita lihat kod untuk memahami bagaimana kita akan melakukan ini.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>An example of using the contextual selector</title>
   <style>
      div p {
         color: lightgreen;
      }
   </style>
</head>
<body>
   <div>
      <p>Hello everyone!!</p>
      <p>How is your day going?</p>
   </div>
   <p>A very good morning to all the readers</p>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas anda dapat melihat bahawa kami menambah 2 perenggan tag di dalam div dan kemudian menambah perenggan lain di luar div itu dan kemudian menggunakan pemilih konteks hanya menukar warna perenggan ia berada di dalam div di dalam dan bukannya di luar div. Mari lihat output untuk memahami apa yang dilakukan oleh kod di atas.

Dalam output di atas, anda boleh melihat bahawa dua perenggan adalah dalam warna "aqua" dan perenggan di luar elemen div adalah dalam warna lalai.

Menggunakan pemilih kontekstual, pembangun boleh menentukan teg yang ingin disasarkan untuk menggunakan gaya dan atribut.

2 contoh di atas menunjukkan cara pembangun boleh menggunakan pemilih kontekstual dan menggunakan gaya hanya pada elemen tertentu.

Kesimpulan

Pemilih konteks mungkin kelihatan mengelirukan pada mulanya, tetapi ia sangat berguna apabila kita ingin menukar gaya elemen yang sangat khusus. Pemilih kontekstual ini memberikan rasa kawalan yang lebih besar kepada pembangun kerana dia boleh menukar gaya mana-mana elemen yang dia mahu ubah.

Dalam artikel ini, kami mempelajari cara menggunakan pemilih konteks dan apakah tujuan menggunakannya?

Atas ialah kandungan terperinci Apakah pemilih kontekstual dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!