CSS 分組和巢狀
阿新 • • 發佈：2018-12-26
組選擇器
<!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>
巢狀選擇器
<!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; } 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>