Pengumpulan dan penyarang CSS


Pemilih Berkumpulan dan Bersarang CSS

Pemilih Berkumpulan

Terdapat banyak elemen dengan gaya yang sama dalam helaian gaya. 

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

Untuk meminimumkan kod, anda boleh menggunakan pemilih berkumpulan.

Setiap pemilih dipisahkan dengan koma.

Dalam contoh berikut, kami menggunakan pemilih berkumpulan untuk kod di atas:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1,h2,p
{
	color:green;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Pemilih bersarang

Ia mungkin digunakan pada gaya pemilih di dalam pemilih.

Dalam contoh berikut tiga gaya ditetapkan:

  • p{ }: Tentukan gaya untuk semua elemen p

  • .ditanda{ }: Tentukan gaya untuk semua elemen dengan class="marked"

  • .ditanda p{ }: Tentukan gaya untuk elemen p dalam semua gaya elemen class="marked" .

  • p.marked{ }: Tentukan gaya untuk semua elemen p dengan class="marked".

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p
{
	color:blue;
	text-align:center;
}
.marked
{
	background-color:red;
}
.marked p
{
	color:white;
}
</style>
</head>

<body>
<p>This paragraph has blue text, and is center aligned.</p>
<div class="marked">
<p>This paragraph has not blue text.</p>
</div>
<p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian