Kuasai pemilih adalah dan di mana: Buat reka letak CSS dinamik dan interaktif-tutorial css-php.cn

Kuasai pemilih adalah dan di mana: Buat reka letak CSS dinamik dan interaktif

PHPz

Lepaskan： 2023-09-08 16:55:57

asal

869 orang telah melayarinya

Kuasai pemilih adalah dan di mana: Buat reka letak CSS dinamik dan interaktif

Mahir dalam dan di mana pemilih: Cipta reka letak CSS yang dinamik dan interaktif

CSS ialah bahagian yang amat diperlukan dalam pembangunan bahagian hadapan, dan ia boleh memberikan pelbagai kesan reka bentuk yang indah untuk halaman web. Antaranya, pemilih ialah salah satu teras CSS, yang boleh membantu kami memilih elemen pada halaman dan menggayakannya. Artikel ini akan memperkenalkan dua pemilih CSS yang biasa digunakan: adalah dan di mana Melalui penggunaan fleksibel mereka, kami boleh mencipta reka letak CSS yang lebih dinamik dan interaktif.

1. ialah pemilih

Pemilih is ialah pemilih baharu yang diperkenalkan dalam CSS Tahap 4. Ia boleh memilih elemen tertentu berdasarkan padanan atribut elemen. Pemilih is mengambil satu atau lebih pemilih sebagai argumen, dipisahkan dengan koma. Contohnya:

nav.is-active,
.header.is-active {
  background-color: #ff0000;
  color: #ffffff;
}

Salin selepas log masuk

Dalam kod di atas, pemilih nav.is-active dan .header.is-active mewakili pemilihan elemen nav dan .header elemen dengan kelas adalah-aktif. Apabila elemen ini dipilih, gaya yang sepadan digunakan, termasuk warna latar belakang merah dan warna fon putih.

Dengan pemilih is, kami boleh memilih elemen berdasarkan nilai atribut yang berbeza untuk mencapai kesan penukaran gaya dinamik. Contohnya, dalam bar navigasi, kita boleh menambah kelas aktif berdasarkan item navigasi yang dipilih pada masa ini, dan kemudian gunakan pemilih ialah untuk menambah gaya berbeza pada item navigasi berbeza untuk menyerlahkan item yang dipilih pada masa ini.

2. Pemilih tempat

Pemilih tempat juga merupakan pemilih baharu yang diperkenalkan dalam CSS Tahap 4. Ia boleh memilih elemen berdasarkan syarat pemilih yang ditentukan, serupa dengan pengendali logik CSS. Contohnya:

div:where(.is-active) {
  background-color: #ff0000;
  color: #ffffff;
}

Salin selepas log masuk

Dalam kod di atas, pemilih div:where(.is-active) bermaksud memilih elemen div dengan kelas adalah-aktif. Apabila elemen dipilih, gaya yang sepadan digunakan, termasuk warna latar belakang merah dan warna fon putih.

Dengan pemilih tempat, kami boleh memilih elemen dengan keadaan tertentu dengan lebih fleksibel, seperti memilih elemen anak pertama atau memilih elemen anak terakhir dan memilih berdasarkan kedudukan elemen dalam aliran dokumen. Dengan cara ini, kita boleh menetapkan gaya yang sepadan mengikut kedudukan dan status elemen untuk mencapai kesan susun atur yang lebih dinamik dan interaktif.

3. Contoh Aplikasi

Berikut ialah contoh mudah yang menunjukkan cara menggunakan is dan tempat pemilih untuk mencipta reka letak CSS yang dinamik dan interaktif.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div:where(.is-active) {
        background-color: #ff0000;
        color: #ffffff;
      }
      
      nav.is-active,
      .header.is-active {
        background-color: #ff0000;
        color: #ffffff;
      }
      
      .nav-item:hover {
        background-color: #0000ff;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div class="is-active">Div 1</div>
    <div>Div 2</div>
    
    <nav class="is-active">Nav 1</nav>
    <nav>Nav 2</nav>
    
    <div class="header is-active">Header 1</div>
    <div class="header">Header 2</div>
    
    <ul class="nav-list">
      <li class="nav-item">Item 1</li>
      <li class="nav-item">Item 2</li>
      <li class="nav-item">Item 3</li>
    </ul>
  </body>
</html>

Salin selepas log masuk

Melalui kod di atas, anda boleh melihat bahawa apabila elemen dengan nama kelas aktif dipilih, warna latar belakang dan warna fonnya akan bertukar merah pada masa yang sama, apabila tetikus melayang di atas elemen dengan kelas name nav-item , warna latar belakang dan warna fon akan bertukar menjadi biru.

Contoh ini menunjukkan cara menambah gaya tertentu pada elemen berdasarkan status dan atributnya untuk mencapai kesan reka letak CSS yang dinamik dan interaktif.

Ringkasan:

Dengan pemilih is dan pemilih tempat, kami boleh memilih dan menggayakan elemen dengan lebih fleksibel, seterusnya mencipta reka letak CSS yang lebih dinamik dan interaktif. Pengenalan mereka memberikan lebih banyak pilihan dan kemungkinan untuk pembangunan bahagian hadapan, membolehkan kami memenuhi keperluan reka bentuk yang berbeza dan pengalaman interaksi pengguna dengan lebih baik. Untuk mendapatkan maklumat lanjut tentang penggunaan dan contoh pemilih ialah dan pemilih tempat, anda boleh merujuk dokumen dan tutorial yang berkaitan untuk menguasai kemahiran aplikasi mereka dan menambah lebih banyak kreativiti dan sorotan pada reka bentuk dan reka letak halaman anda.

Atas ialah kandungan terperinci Kuasai pemilih adalah dan di mana: Buat reka letak CSS dinamik dan interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!