Artikel Topik pembelajaran Muat turun Soal Jawab Kamus Pengaturcaraan Permainan kemas kini terkini

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Rumah > hujung hadapan web > tutorial css > teks badan

Bagaimana untuk Menggayakan Elemen Bersarang Khusus merentas Struktur Induk Berbeza?

Barbara Streisand

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

asal

172 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

1651

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

1805

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

1533

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