CSS之分組選擇器和巢狀選擇器
阿新 • • 發佈：2018-11-20
分組選擇器，
將一個樣式應用於多個類，或者標籤啥的
每個選擇器用逗號隔開
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> h1,h2,p { color:green; } </style> </head> <body> <h1>Hello World!</h1> <h2>View CodeSmaller heading!</h2> <p>This is a paragraph.</p> </body> </html>
結果如下
巢狀選擇器
它可能適用於選擇器內部的選擇器的樣式。
在下面的例子設定了三個樣式：
- p{ }: 為所有 p 元素指定一個樣式。
- .marked{ }: 為所有 class="marked" 的元素指定一個樣式。
- .marked p{ }: 為所有 class="marked" 元素內的 p元素指定一個樣式。
- p.marked{ }: 為所有 class="marked" 的 p 元素指定一個樣式。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> body{ background-color:darkgrey; } p { color:blueView Code; text-align:center; } .marked { background-color:red; } .marked p { color:white; } p.marked{ text-decoration:underline; } </style> </head> <body> <p>這個段落是藍色文字，居中對齊。</p> <div class="marked"> <p>這個段落不是藍色文字。</p> </div> <p>所有 class="marked"元素內的 p 元素指定一個樣式，但有不同的文字顏色。</p> <p class="marked">帶下劃線的 p 段落。</p> </body> </html>
