分組選擇器，
將一個樣式應用於多個類，或者標簽啥的
每個選擇器用逗號隔開
<!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>Smaller 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:blue; 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>
在 CSS3 中包含了四種組合方式:
- 后代選擇器(以空格分隔)
- 子元素選擇器(以大於號分隔）
- 相鄰兄弟選擇器（以加號分隔）
- 普通兄弟選擇器（以破折號分隔）
鏈接如下
http://www.runoob.com/css/css-combinators.html