pemilih CSS
Pemilih CSS
Pemilih CSS dibahagikan kepada dua jenis
Pemilih Id dan Kelas
Jika anda ingin menetapkan gaya CSS dalam elemen HTML, anda perlu menetapkan pemilih "id" dan "kelas" dalam elemen tersebut.
pemilih id
Pemilih id boleh menentukan gaya khusus untuk elemen HTML yang ditandakan dengan id tertentu.
Elemen HTML menggunakan atribut id untuk menetapkan pemilih id dan pemilih id dalam CSS ditakrifkan dengan "#".
Peraturan gaya berikut digunakan pada atribut elemen id="para1":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">php中文网(php.cn)</p>
<p>这一段不受css样式影响。</p>
</body>
</html>Jalankan atur cara untuk mencubanya
Atribut ID harus tidak bermula dengan nombor ID yang bermula dengan nombor tidak berfungsi dalam pelayar Mozilla/Firefox.
pemilih kelas
pemilih kelas digunakan untuk menerangkan gaya sekumpulan elemen Pemilih kelas adalah berbeza daripada id selector , kelas boleh digunakan dalam berbilang elemen.
Pemilih kelas diwakili oleh atribut kelas dalam HTML Dalam CSS, pemilih kelas dipaparkan dengan titik ".":
Dalam contoh berikut, semua objek dengan kelas tengah. Elemen HTML semuanya berpusat.
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>Jalankan atur cara untuk mencubanya
Anda juga boleh menentukan elemen HTML tertentu menggunakan kelas.
Dalam contoh berikut, semua elemen p menggunakan class="center" untuk memusatkan teks elemen:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">这个标题将不会受到影响</h1>
<p class="center">这一段将居中对齐</p>
</body>
</html>Jalankan program dan cuba
Aksara pertama nama kelas tidak boleh menggunakan nombor! Ia tidak akan berfungsi dalam Mozilla atau Firefox.
