Mendedahkan fungsi tersembunyi dan penggunaan praktikal pemilih lanjutan CSS

Nyahsulit fungsi tersembunyi dan kes praktikal pemilih lanjutan CSS

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk menerangkan gaya halaman web dan memainkan peranan penting dalam pembangunan web. Selain pemilih asas, CSS juga menyediakan beberapa pemilih lanjutan yang boleh memilih elemen dengan lebih tepat dan menambah gaya padanya. Artikel ini akan memperkenalkan beberapa fungsi tersembunyi dan kes praktikal pemilih lanjutan CSS, dan memberikan contoh kod khusus.

1. Pemilih kad bebas

Pemilih kad bebas menggunakan simbol "*" untuk memadankan semua elemen pada halaman. Contohnya, gunakan pemilih kad bebas untuk menggayakan semua perenggan dalam halaman:

p {
    color: blue;
}

Dengan cara ini, semua perenggan dalam halaman akan kelihatan biru.

2. Pemilih atribut

Pemilih atribut boleh memilih elemen berdasarkan nilai atributnya dan menambah gaya padanya. Pemilih atribut biasa termasuk yang berikut:

1. Pemilih Atribut: Gunakan nama atribut untuk memilih elemen.

Sebagai contoh, anda boleh memilih semua elemen dengan atribut "tajuk" dan menambah gaya padanya:

[title] {
    font-weight: bold;
}

2. Pemilih Nilai Atribut: Pilih elemen berdasarkan nilai atribut.

Sebagai contoh, anda boleh memilih semua elemen dengan nilai atribut "merah" dan menambah gaya padanya:

[title="red"] {
    color: red;
}

3. Exists Selector: Memilih elemen dengan atribut tertentu, tanpa mengira nilai atribut.

Sebagai contoh, anda boleh memilih semua elemen dengan atribut "tajuk" dan menambah gaya padanya:

[title] {
    font-weight: bold;
}

4. Bermula Dengan Pemilih: Pilih elemen yang nilai atributnya bermula dengan rentetan tertentu.

Sebagai contoh, anda boleh memilih semua elemen dengan atribut "tajuk" bermula dengan "hello" dan menambah gaya padanya:

[title^="hello"] {
    color: green;
}

5. Ends With Selector: Pilih elemen yang nilai atributnya berakhir dengan rentetan tertentu .

Sebagai contoh, anda boleh memilih semua elemen dengan atribut "tajuk" yang berakhir dengan "dunia" dan menambah gaya padanya:

[title$="world"] {
    color: blue;
}

3. Pemilih kelas pseudo

Pemilih kelas pseudo ialah keadaan khas yang digunakan untuk memilih elemen atau pemilih lokasi. Pemilih kelas pseudo biasa termasuk yang berikut:

1. :pemilih kelas pseudo tuding: memilih keadaan apabila tetikus melayang di atas elemen.

Sebagai contoh, anda boleh memilih semua keadaan alih tetikus dan gayakannya:

a:hover {
    text-decoration: underline;
}

2. :pemilih kelas pseudo fokus: Memilih elemen yang mempunyai fokus.

Sebagai contoh, anda boleh memilih kotak input yang difokuskan dan menambah gaya padanya:

input:focus {
    outline: 2px solid blue;
}

3. :pemilih kelas pseudo kanak-kanak ke-: pilih elemen anak pada kedudukan yang ditentukan.

Sebagai contoh, anda boleh memilih elemen bernombor genap dalam setiap senarai dan menambah gaya padanya:

li:nth-child(even) {
    background-color: lightgray;
}

Empat kes praktikal menggunakan pemilih lanjutan bersama

1. Kesan menu bar navigasi

Gunakan pemilih atribut. -pemilih kelas, yang boleh merealisasikan kesan penonjolan menu bar navigasi. Contoh kod:

ul#nav li {
    display: inline;
    margin-right: 10px;
}

ul#nav li a {
    text-decoration: none;
    color: black;
}

ul#nav li a:hover {
    color: blue;
    font-weight: bold;
}

2. Borang pengesahan input

Menggunakan pemilih atribut dan pemilih kelas pseudo, anda boleh menambah gaya pengesahan pada kotak input. Contoh kod:

input[required] {
    border: 1px solid red;
}

input:invalid {
    background-color: pink;
}

Di atas ialah penyahsulitan fungsi tersembunyi dan kes praktikal pemilih lanjutan CSS. Dengan menggunakan pemilih lanjutan ini secara fleksibel, kami boleh memilih elemen dengan lebih tepat dan menambah gaya padanya, seterusnya mencapai kesan halaman yang lebih pelbagai. Saya harap artikel ini dapat memberi anda sedikit bantuan dalam menggunakan pemilih dalam CSS.

Atas ialah kandungan terperinci Mendedahkan fungsi tersembunyi dan penggunaan praktikal pemilih lanjutan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!