Why Doesn't `:first-child` Select the First `` in a ``?

Tafsiran Salah Pemilih CSS

Apabila cuba menggayakan

elemen dalam

dengan nama kelas detail_container, anda mungkin menghadapi hasil yang tidak dijangka. Isu ini timbul kerana salah faham tentang cara pemilih :first-child beroperasi.

CSS yang anda laksanakan sedang cuba memilih

elemen yang juga merupakan anak pertama bagi detail_container

. Walau bagaimanapun, jika elemen pertama dalam

ialah

, walaupun ia adalah

dalam

Penggunaan Pemilih CSS yang Betul

Untuk memilih

elemen, tanpa mengira kedudukannya dalam detail_container

, anda harus menggunakan pemilih :first-of-type. Pemilih ini akan memilih

elemen yang merupakan anak langsung kepada elemen induk yang ditentukan.

.detail_container h1:first-of-type {
  color: blue;
}

Salin selepas log masuk

Sebagai alternatif, untuk keserasian penyemak imbas yang lebih baik, anda boleh menetapkan kelas kepada

dan sasarkan kelas tersebut dalam CSS anda.

.detail_container h1.first {
  color: blue;
}

Salin selepas log masuk

Dengan memahami nuansa pemilih CSS, anda boleh memastikan peraturan penggayaan anda menyasarkan elemen yang dikehendaki dengan tepat.

Atas ialah kandungan terperinci Mengapa `:first-child` Tidak Memilih `` Pertama dalam ``?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Menggayakan Medan Input Kosong dengan Boleh Dipercayai dengan CSS? Artikel seterusnya：Bagaimanakah Saya Boleh Menggayakan Butang Dilumpuhkan dengan CSS?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2491

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2634

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

2229

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...