cari

Rumah >hujung hadapan web >tutorial css >Memperkenalkan Pemilih CSS

Memperkenalkan Pemilih CSS

DDD
DDDasal
2025-01-22 00:13:10401semak imbas
<p>Pelajaran ini mendalami mempertingkatkan visual HTML menggunakan Helaian Gaya Cascading (CSS). Kami akan bermula dengan pemilih CSS – alat untuk menyasarkan elemen HTML tertentu.

<p>Helaian Gaya Lata (CSS)

<p>CSS menentukan rupa komponen HTML: warna, jarak, saiz dan banyak lagi. Walaupun anda boleh menggayakan elemen individu menggunakan atribut style sebaris (mis., <p style="color:red;">), ini tidak cekap untuk tapak web yang besar.

<p>Pendekatan yang lebih berkesan melibatkan penggunaan elemen <style> dalam bahagian <head> HTML anda atau fail CSS berasingan (seperti style.css) yang dipautkan ke HTML anda menggunakan <link>:

<code class="language-html">  <style>
    p {
      color: red;
      text-decoration: underline;
    }
  </style></code>
<p>atau

<code class="language-html"><!-- index.html -->
<link href="style.css" rel="stylesheet"></code>
<code class="language-css">/* style.css */
p {
  color: red;
  text-decoration: underline;
}</code>
<p>Ini menggunakan gaya yang sama untuk semua <p> elemen. Alat pembangun penyemak imbas (cth., klik kanan, "Periksa" dalam Chrome) membolehkan anda memeriksa dan mengubah suai gaya yang digunakan untuk menyelesaikan masalah.

Introducing CSS Selectors Introducing CSS Selectors <p>Memilih Elemen HTML

<p>p dalam p { color: red; } memilih semua <p> elemen. Untuk struktur yang lebih kompleks, atribut id dan class menyediakan kawalan yang lebih halus.

<p>Pemilih Kelas dan ID

<p>Setiap elemen boleh mempunyai id yang unik. Pemilih ID (#idName) elemen sasaran oleh id mereka. Walau bagaimanapun, idmesti unik, mengehadkan fleksibilitinya.

<p>Kelas menawarkan fleksibiliti yang lebih besar. Pelbagai elemen boleh berkongsi kelas yang sama. Elemen sasaran pemilih kelas (.className) dengan kelas itu. Elemen boleh mempunyai berbilang kelas (cth., <p class="red-text bold">).

<p>.red-text { color: red; } menggayakan semua elemen dengan kelas red-text. p.red-text secara khusus menggayakan hanya <p> elemen dengan red-text.

<p>Pemilih Penggabung

<p>Model Objek Dokumen (DOM) mewakili struktur halaman sebagai pokok. Pemilih kombinator memanfaatkan hierarki ini.

  • div p: Memilih semua <p> elemen dalam <div> elemen (keturunan).
  • div > p: Memilih hanya kanak-kanak langsung <p> elemen <div> elemen.
  • p span: Memilih <span> serta-merta mengikuti <p>.
  • p ~ span: Memilih semua <span> adik beradik mengikuti <p>.
Introducing CSS Selectors Introducing CSS Selectors Introducing CSS Selectors Introducing CSS Selectors Introducing CSS Selectors <p>Kombinasi penggabung yang terlalu kompleks tidak digalakkan. Anda boleh menggabungkannya dengan pemilih kelas (mis., .intro p).

<p>Pemilih Pseudo

<p>Elemen gaya pemilih kelas pseudo berdasarkan keadaannya (cth., a:hover, a:active, a:visited). Pemilih unsur pseudo menyasarkan bahagian elemen (mis., ::first-letter).

<p>Pemilih Lain

  • *: Pemilih universal, memilih semua elemen.
  • Pemilih kumpulan (cth., h1, h2, p): Pilih berbilang jenis elemen.
  • Pemilih atribut (cth., p[lang], p[lang="en"]): Pilih elemen berdasarkan atribut.
<p>Bacaan Lanjut:

  • Reka Bentuk Responsif
  • Imej Responsif
  • Animasi CSS
<p>Siaran ini pada asalnya muncul di TheDevSpace.

Atas ialah kandungan terperinci Memperkenalkan Pemilih CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css chrome html Object for while select using class Attribute dom this Other
Kenyataan：
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 sebelumnya：Cara Menyembunyikan Bar Pentadbir WordPressArtikel seterusnya：Cara Menyembunyikan Bar Pentadbir WordPress

Artikel berkaitan

Lihat lagi