Memperkenalkan Pemilih CSS-tutorial css-php.cn

Memperkenalkan Pemilih CSS

DDD

Lepaskan： 2025-01-22 00:13:10

asal

400 orang telah melayarinya

Pelajaran ini mendalami mempertingkatkan visual HTML menggunakan Helaian Gaya Cascading (CSS). Kami akan bermula dengan pemilih CSS – alat untuk menyasarkan elemen HTML tertentu.

Helaian Gaya Lata (CSS)

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

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>

Salin selepas log masuk

atau

<code class="language-html"><!-- index.html -->
<link href="style.css" rel="stylesheet"></code>

Salin selepas log masuk

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

Salin selepas log masuk

Ini menggunakan gaya yang sama untuk semua  elemen. Alat pembangun penyemak imbas (cth., klik kanan, "Periksa" dalam Chrome) membolehkan anda memeriksa dan mengubah suai gaya yang digunakan untuk menyelesaikan masalah.

Memilih Elemen HTML

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

Pemilih Kelas dan ID

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

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., ).

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

Pemilih Penggabung

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

div p: Memilih semua  elemen dalam <div> elemen (keturunan).
div > p: Memilih hanya kanak-kanak langsung  elemen <div> elemen.
p span: Memilih  serta-merta mengikuti .
p ~ span: Memilih semua  adik beradik mengikuti .

Kombinasi penggabung yang terlalu kompleks tidak digalakkan. Anda boleh menggabungkannya dengan pemilih kelas (mis., .intro p).

Pemilih Pseudo

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

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.

Bacaan Lanjut: