CSS 分組和巢狀 選擇器
阿新 • • 發佈：2018-12-26
Grouping Selectors
在樣式表中有很多具有相同樣式的元素。
h1{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
為了儘量減少程式碼，你可以使用分組選擇器。
每個選擇器用逗號分隔.
在下面的例子中，我們對以上程式碼使用分組選擇器：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自學教程(如約智惠.com)</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>
巢狀選擇器
它可能適用於選擇器內部的選擇器的樣式。
在下面的例子設定了三個樣式：
·為所有p元素指定一個樣式
·為所有class="marked"的元素指定一個樣式
·為所有class="marked"元素內的p元素指定一個樣式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自學教程(如約智惠.com)</title> <style> p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; } </style> </head> <body > <p>這個段落是藍色文字，居中對齊。</p> <div class="marked"> <p>這個段落不是藍色文字。</p> </div> <p>所有 class="marked"元素內的 p 元素指定一個樣式，但有不同的文字顏色。</p> </body> </html>