apakah pemilih css-Soal Jawab bahagian hadapan-php.cn

apakah pemilih css

PHPz

Lepaskan： 2023-05-27 14:43:08

asal

920 orang telah melayarinya

CSS (Cascading Style Sheets) ialah bahasa yang biasa digunakan dalam reka bentuk web Ia digunakan terutamanya untuk menentukan gaya dan reka letak elemen halaman web, dengan itu menjadikan halaman web lebih cantik dan lebih mudah dibaca. Dalam CSS, pemilih ialah mekanisme untuk memilih elemen HTML yang mana gaya harus digunakan. Dalam artikel ini, kami akan meneroka apakah pemilih CSS dan cara menggunakannya.

1. Apakah itu pemilih CSS?

Pertama, kita perlu memahami apa itu pemilih CSS. Pemilih CSS merujuk kepada corak untuk memilih elemen HTML. Pemilih CSS boleh menjadi elemen, kelas, ID, atribut, dsb., yang mentakrifkan elemen HTML untuk digunakan dalam CSS, supaya gaya CSS boleh digunakan dengan tepat pada elemen yang ditentukan.

Sebagai contoh, dalam kod HTML berikut, kita boleh menggunakan pemilih CSS untuk memilih elemen h1 di dalamnya:

<!doctype html>
<html>
<head>
  <title>My Example Webpage</title>
  <style>
    h1 {
      color: blue;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kita menggunakan pemilih CSS berikut untuk memilih h1 elemen :

h1 {
  color: blue;
  font-family: Arial, sans-serif;
}

Salin selepas log masuk

Dengan cara ini, kita boleh mengawal sifat gaya seperti warna dan fon elemen h1 dan menjadikannya kelihatan biru.

2. Pemilih CSS Biasa

Berikut ialah contoh beberapa pemilih CSS:

Pemilih Elemen

Pemilih Elemen ialah pemilih digunakan untuk memilih elemen HTML secara langsung. Contohnya, kita boleh memilih semua elemen perenggan menggunakan kod berikut:

p {
  color: black;
}

Salin selepas log masuk

Dengan cara ini, kita boleh menukar semua elemen perenggan kepada fon hitam.

Pemilih kelas

Pemilih kelas ialah pemilih yang memilih elemen HTML menggunakan nama kelas. Nama kelas ialah rentetan yang bermula dengan noktah (.). Sebagai contoh, kita boleh memilih semua elemen HTML dengan nama kelas "highlight" menggunakan kod berikut:

.highlight {
  background-color: yellow;
}

Salin selepas log masuk

Dengan cara ini, kita boleh menukar warna latar belakang elemen ini kepada kuning.

Pemilih ID

Pemilih ID ialah pemilih yang memilih elemen HTML menggunakan atribut ID. Atribut ID ialah rentetan yang bermula dengan #. Sebagai contoh, kita boleh memilih elemen HTML dengan ID "header" menggunakan kod berikut:

#header {
  font-size: 24px;
}

Salin selepas log masuk

Dengan cara ini, kita boleh menetapkan saiz fon elemen pengepala kepada 24 piksel.

Sub-pemilih

Sub-pemilih ialah pemilih yang memilih elemen anak satu tahap di bawah elemen yang ditentukan. Subpemilih diwakili menggunakan simbol ">". Sebagai contoh, kita boleh menggunakan kod berikut untuk memilih semua perenggan sub-elemen langsung di bawah elemen dengan id "bekas":

#container > p {
  margin-bottom: 10px;
}

Salin selepas log masuk

Dengan cara ini, kita boleh memilih semua sub-elemen langsung (iaitu perenggan) di bawah elemen dengan id "bekas" Tetapkan margin bawah kepada 10 piksel.

Pemilih keturunan

Pemilih keturunan ialah pemilih yang memilih semua elemen keturunan di bawah elemen yang ditentukan. Pemilih keturunan diwakili menggunakan simbol ruang putih. Sebagai contoh, kita boleh menggunakan kod berikut untuk memilih elemen perenggan di bawah semua elemen div:

div p {
  font-style: italic;
}

Salin selepas log masuk

Dengan cara ini, kita boleh menukar fon perenggan di bawah semua elemen div kepada italik.

3. Ringkasan

Pemilih CSS ialah mekanisme penting untuk mengawal gaya dan reka letak elemen halaman web. Dalam artikel ini, kami memperkenalkan jenis pemilih CSS biasa dan memberikan beberapa contoh cara menggunakannya. Dengan menguasai penggunaan pemilih CSS, kami boleh mengawal gaya dan reka letak elemen HTML dengan lebih tepat, seterusnya menghasilkan halaman web yang lebih cantik dan mudah dibaca.

Atas ialah kandungan terperinci apakah pemilih css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!