Ketahui Apa Selector Keturunan CSS Adakah

Struktur dokumen HTML adalah sama dengan pokok keluarga. Dalam keluarga anda, anda mempunyai ibu bapa dan orang lain yang datang ke hadapan anda. Inilah nenek moyangmu. Anak-anak dan orang-orang yang mengikuti kamu di atas pokok itu adalah keturunanmu. HTML berfungsi dengan cara yang sama. Unsur-unsur yang berada di dalam unsur-unsur lain adalah keturunan mereka. Contohnya, kerana hampir setiap elemen HTML ada di dalamnya tag, mereka akan menjadi keturunan itu unsur-unsur. Hubungan ini penting untuk difahami apabila anda mula bekerja dengan CSS dan perlu menyasarkan elemen tertentu untuk menggunakan gaya visual.

Pemilih Keturunan CSS

Pemilih keturunan CSS terpakai kepada unsur-unsur yang berada di dalam elemen lain (atau lebih tepat dinyatakan, unsur yang merupakan keturunan unsur lain). Sebagai contoh, senarai tidak teratur mempunyai tag dengan tanda sebagai keturunan. Mari kita gunakan HTML berikut sebagai contoh:

• ini adalah pautan

The LI tag adalah keturunan UL tag. The A tag adalah keturunan kedua-duanya yang LI (anak keturunan) dan UL (cucu keturunan). Sekiranya anda berfikir tentang ini menggunakan contoh pokok keluarga,

akan menjadi ibu bapa, yang
• akan menjadi anak lelaki itu, dan akan menjadi anak kepada
• dan cucu daripada
  .

  Jadi, bagaimanakah anda mensasarkan elemen tertentu dalam laman web menggunakan pemilih keturunan ini? Pertama, anda perlu menentukan pemilih keturunan dengan menggunakan dua (atau lebih) pemilih jenis yang dipisahkan oleh ruang.

  li a {text-decoration: none; }

  Dalam contoh itu, gaya hanya akan dikenakan pada elemen pautan () yang merupakan keturunan unsur senarai item (

  • ). Semua pautan lain pada halaman yang bukan keturunan daripada item senarai tidak akan mendapat gaya ini.

    Satu perkara penting untuk diingat adalah bahawa tidak kira berapa banyak tag yang ada di antara tag yang mungkin anda gunakan dalam pemilih keturunan anda. Jika elemen kedua dilampirkan di mana-mana dalam elemen pertama, ia akan dipilih sebagai keturunan.

    Sekiranya anda ingin memilih semua sauh yang diturunkan dari elemen ul, anda akan menulis:

    ul a {text-decoration: none; }

    Sekarang, gaya-gaya ini akan digunakan untuk mana-mana pautan yang merupakan keturunan dari item senarai. Anda juga boleh menulis pemilih ini

    ul li a {text-decoration: none; }

    Ini adalah pemilih keturunan yang menggunakan lebih daripada dua pemilih jenis. Dalam kes ini, ini akan digunakan untuk pautan yang berada di dalam senarai item dan juga di dalam senarai yang tidak disusun.

    Menggunakan Pemilih Kelas dan Pengikut ID

    Pemilihan yang anda turunkan dari tidak perlu selalu menjadi keturunan. Sebagai contoh, bayangkan anda mempunyai kawasan tapak (seperti bahagian) dengan atribut ID "papan iklan". Anda boleh menubuhkan pemilih keturunan daripada ID tersebut:

    #billboard ul {background-color: #ccc; }

    Ini akan menyusun senarai tidak teratur yang merupakan keturunan unsur dengan ID "papan iklan". Anda boleh melakukan perkara yang sama untuk nilai kelas.

    div.billboard ul {background-color: #ccc; }

    Ini menganggap bahawa bahagian mempunyai nilai kelas "papan iklan". CSS di atas akan menjadi gaya

    elemen dalam mana-mana bahagian yang mempunyai nilai kelas ini.

    Anda boleh menjadi sangat berat dan tegas dengan pemilih keturunan. Sebagai contoh, jika anda menggunakan Dreamweaver untuk menulis kod HTML anda, terdapat tetapan apabila anda menambah peraturan CSS baru yang akan mencipta pemilih secara automatik berdasarkan penempatan kursor anda pada halaman itu. Apa yang dilakukan oleh Dreamweaver dalam keadaan ini adalah mencipta pemilih keturunan yang berani dan panjang. Keistimewaan yang banyak tidak perlu untuk CSS anda berfungsi. Apa yang anda mahu lakukan ialah mencari keseimbangan antara pemilih keturunan yang cukup spesifik supaya anda boleh menguji elemen-elemen yang anda perlukan (tanpa gaya yang anda tidak mahu mempengaruhi) tanpa peraturan CSS yang mempunyai pemilihan yang terlalu banyak besar.