CSS 分組 和 嵌套 選擇器
CSS 分組 和 嵌套 選擇器
所謂分組選擇器就是當多個選擇器對應(yīng)的元素需要相同的樣式時可以將多個選擇器以逗號分隔放在一條樣式聲明的前面達到多個選擇器多條樣式聲明相同的效果.
所謂嵌套選擇器就是實現(xiàn)對選擇器內(nèi)部的選擇器對應(yīng)的元素實現(xiàn)樣式的設(shè)置.css
在樣式表中有很多具有相同樣式的元素。
h1{color:green;} h2{color:green;} p{color:green;}
為了盡量減少代碼,你可以使用分組選擇器。
每個選擇器用逗號分隔.
在下面的例子中,我們對以上代碼使用分組選擇器:
h1,h2,p{color:green;}
嵌套選擇器
它可能適用于選擇器內(nèi)部的選擇器的樣式。
在下面的例子設(shè)置了三個樣式:
為所有p元素指定一個樣式
為所有class=”marked”的元素指定一個樣式
為所有class=”marked”元素內(nèi)的p元素指定一個樣式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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"元素內(nèi)的 p 元素指定一個樣式,但有不同的文本顏色。</p> </body> </html>