Tutorial ini memperincikan cara menggunakan CSS untuk menyembunyikan kandungan teks tertentu dengan tepat di halaman HTML untuk mengelakkan masalah seluruh elemen induk yang tersembunyi kerana pemilih yang tidak betul. Dengan menambah kelas CSS eksklusif ke elemen pembalut teks sasaran dan menggunakan paparan: tiada; Atribut, pemaju boleh mencapai kawalan halus elemen halaman, memastikan bahawa hanya bahagian yang diperlukan tersembunyi, dengan itu mengoptimumkan susun atur halaman dan pengalaman pengguna.

1. Memahami masalah: cabaran tersembunyi yang tidak betul

Dalam pembangunan web, kita sering perlu menyembunyikan teks atau elemen tertentu pada halaman. Walau bagaimanapun, jika pemilih tidak cukup tepat, ia boleh membawa kepada hasil yang tidak dijangka, iaitu, lebih banyak kandungan tersembunyi daripada yang diharapkan.

Pertimbangkan struktur HTML berikut, yang mengandungi tajuk

dengan tag dan teks biasa di dalam:

 <h1 class="Halaman-Header-Title" style="User-Pilih: Auto;">
   <span style="pengguna-pilih: auto;"> menunjukkan catatan dari </span>
   "[Kategori:]"
   <span style="pengguna-pilih: auto;"> tindakan </span>
</h1>

Matlamat kami adalah untuk menyembunyikan teks "menunjukkan jawatan dari", tetapi jika pemilih untuk elemen induk digunakan dengan tidak betul, sebagai contoh:

 H1.Page-Header-Title {
     Paparan: Tiada;
}

Kod CSS ini menyembunyikan seluruh elemen

dan semua sub-kandungannya (termasuk "menunjukkan jawatan dari", "[kategori:]", dan "tindakan", yang jelas bukan hasil yang kita inginkan.

2. Penyelesaian: Gunakan kelas CSS untuk mencapai kawalan yang tepat

Untuk mencapai dengan tepat menyembunyikan teks tertentu tanpa menjejaskan unsur -unsur saudara atau induknya, cara yang paling berkesan adalah untuk menambah kelas CSS yang unik ke elemen pembungkus langsung teks sasaran, dan kemudian memohon paparan: Tiada; gaya melalui kelas itu.

Langkah 1: Ubah suai struktur HTML

Cari tag yang mengandungi teks sasaran "Menunjukkan jawatan dari" dan tambahkan kelas CSS baru semantik, seperti span-hide:

 <h1 class="Halaman-Header-Title" style="User-Pilih: Auto;">
   <span class="span-hide" style="user-select: auto;"> menunjukkan catatan dari </span>
   "[Kategori:]"
   <span style="pengguna-pilih: auto;"> tindakan </span>
</h1>

Langkah 2: Tulis Gaya CSS

Sekarang kita boleh menggunakan kelas yang baru ditambah .span-hide sebagai pemilih dan memohon paparan: tiada; harta:

 .span-hide {
    Paparan: Tiada;
}

Dengan cara ini, hanya unsur-unsur dengan kelas span-hide akan tersembunyi, manakala teks biasa tahap yang sama "[Kategori:]" dan satu lagi tindakan akan tetap kelihatan, dan elemen induk

tidak akan terjejas.

3. Prinsip dan langkah berjaga -jaga yang bekerja

• Kekhususan pemilih CSS: Dengan menambahkan kelas yang unik ke elemen sasaran, kami membuat pemilih yang sangat spesifik. CSS akan memberi keutamaan menerapkan peraturan gaya yang lebih spesifik. Apabila .span-hide digunakan, ia menunjukkan tepat kepada elemen yang kita mahu sembunyikan, bukannya ibu bapa atau unsur saudara yang lain.
• Fungsi paparan: Tiada;: paparan: Tiada; akan menyebabkan unsur -unsur dikeluarkan sepenuhnya dari aliran dokumen, tidak menduduki ruang, dan kandungan mereka juga tidak dapat dilihat oleh teknologi bantuan seperti pembaca skrin.
• Alternatif: Jika anda mahu unsur -unsur tersembunyi secara visual tetapi masih menduduki ruang asalnya, atau jika kandungan anda masih boleh dibaca kepada pembaca skrin, pertimbangkan untuk menggunakan sifat CSS yang lain:
  • Keterlihatan: Tersembunyi;: Elemen tidak dapat dilihat, tetapi masih mengambil ruang.
  • Opacity: 0;: Elemen adalah telus, tetapi masih menduduki ruang dan boleh bertindak balas terhadap peristiwa.
  • Kedudukan: Mutlak; Kiri: -9999px;: Move Elements Out of the Viewport, biasanya digunakan untuk menyembunyikan kebolehaksesan.
• Nama Kelas Semantik: Adalah disyorkan untuk menggunakan nama kelas yang sangat deskriptif dan semantik (seperti span-hide, teks tersembunyi, tersembunyi secara visual) untuk memudahkan penyelenggaraan dan pemahaman kod.
• Elakkan gaya dalam talian: Walaupun HTML asal mengandungi gaya pengguna dalam talian-memilih: Auto;, dalam pembangunan sebenar, anda harus cuba memisahkan gaya ke dalam fail CSS untuk meningkatkan kebolehpercayaan dan kebolehgunaan semula kod anda.

Meringkaskan

Kawalan yang tepat mengenai penglihatan elemen halaman adalah kemahiran asas dalam pembangunan front-end. Dengan menambahkan kelas CSS eksklusif ke elemen sasaran dan menggabungkan atribut seperti paparan: tiada;, kita boleh mengelakkan bersembunyi global yang tidak perlu dan mencapai pengurusan kandungan halaman yang sangat halus. Pendekatan ini bukan sahaja menjadikan kod lebih mudah dibaca dan dikekalkan, tetapi juga memastikan ketepatan susun atur halaman dan pengoptimuman pengalaman pengguna.

Atas ialah kandungan terperinci Petua CSS: Tepat menyembunyikan kandungan teks tertentu tanpa menjejaskan elemen ibu bapa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!