masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menggayakan Elemen Bersarang Khusus merentas Struktur Induk Berbeza?

Bagaimana untuk Menggayakan Elemen Bersarang Khusus merentas Struktur Induk Berbeza?

Barbara Streisand

Lepaskan： 2024-10-23 23:05:30

asal

257 orang telah melayarinya

How to Style Specific Nested Elements across Different Parent Structures?

Menggayakan Elemen Nested nth-child merentas Berbilang Ibu Bapa

Mencari penyelesaian untuk menggayakan elemen bersarang tertentu dalam struktur induk yang berbeza-beza, pertimbangkan penanda berikut :

<br><div class="foo"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul>
    <li>one</li>
    <li>two</li>
</ul>
<ul>
    <li>three</li>
</ul>
<ul>
    <li>four</li>
</ul>

Salin selepas log masuk

Matlamatnya adalah untuk menggunakan gaya pada "satu" dan "tiga", tidak kira sama ada mereka adalah anak pertama bagi setiap

Had :nth-child()

Percubaan untuk menggunakan :nth-child() gagal kerana ia hanya terpakai pada elemen yang berkongsi ibu bapa yang sama. Dalam senario ini, pemilih CSS .foo li:nth-child(1), .foo li:nth-child(3) hanya akan menyasarkan anak pertama setiap

Penyelesaian Alternatif

JavaScript:

Menggunakan perpustakaan seperti jQuery membolehkan anda memilih elemen menggunakan keupayaan penapisan hebat JavaScript. Sebagai contoh, skrip berikut akan menyasarkan

pertama dan ketiga; elemen dalam bekas .foo:
```
<code class="javascript">$('.foo li:eq(0), .foo li:eq(2)')</code>
```
Salin selepas log masuk
Penanda Elemen Eksplisit:

Anda boleh menandai elemen yang diingini secara eksplisit dengan kelas atau ID untuk mendayakan pemilihannya melalui CSS. Sebagai contoh, menambah kelas pada
pertama dan ketiga; elemen:

sumber：php

Artikel sebelumnya：Bagaimana untuk Membetulkan Isu Pertindihan Div dengan z-index? Artikel seterusnya：Mengapa Jejari Sempadan Tidak Berfungsi pada Imej dalam Chrome?

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

2049

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

2204

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

1862

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