Pemilih CSS
1. >
(1) Pemilih "*": Kad liarPenerangan
: akan sepadan dengan Semua teg HTML , semua tag akan berubah.
Sintaks: *{ color:red; }
Nota: Gunakan "*" sedikit mungkin, kerana IE6 tidak menyokongnya.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> *{ color:red; } </style> </head> <body> <h1>习近平心中的互联网</h1> <p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> </html>
(2) Pemilih teg
Penerangan : Akan sepadan dengan teg HTML yang ditentukan.
: h1{ color:red; }
Nota: Pemilih teg CSS mempunyai nama yang sama dengan teg HTML, tetapi kurungan sudut tidak boleh tambah.<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
h1{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>习近平心中的互联网</h1>
<p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</body>
</html>
(3) pemilih kelas (pemilih kelas) - pemilih kelas adalah yang paling kerap digunakan
Penerangan: Tambahkan gaya pada jenis teg HTML. "Satu kelas" yang dirujuk di sini ialah: setiap teg HTML mempunyai atribut kelas dan nilai kelas adalah sama. Atribut kelas ialah atribut awam yang ada pada setiap teg HTML.
Nama pemilih kelas mesti bermula dengan "." dan terhad kepada nilai atribut kelas teg HTML. Contohnya: .box{ color:red; }
Nota: Nilai atribut kelas teg HTML tidak boleh bermula dengan nombor.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> .NO1{ color:red; background-color:#88ff66; } </style> </head> <body> <h1 class="NO1">习近平心中的互联网</h1> <p class="NO1">互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> </html>
(4) pemilih id
Penerangan : Tambahkan gaya pada elemen dengan id yang ditentukan.
:
Nilai atribut id teg HTML dalam halaman web mestilah unik.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> #NO1{ color:blue; background-color:#88ff99; } .NO1{ color:red; background-color:#88ff66; } </style> </head> <body> <h1 id="NO1">习近平心中的互联网</h1> <p class="NO1">互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> </html>