<div style="background: yellow;">
<h2 style="color: red;">紅色的標題</h2>
<p style="color: green;">綠色的字</p>
<p style="color: green;">綠色的字</p>
<p style="color: green;">綠色的字</p>
</div>紅色的標題
綠色的字
綠色的字
綠色的字
<head>
...
<style>
Selector{
屬性1
屬性2
}
</style>
...
</head>div{
background: yellow;
}*{
(Attribute)
}*{
margin: 0;
padding: 0;
font-family: 微軟正黑體,Microsoft JhengHei,黑體,SimHei,標楷體,DFKai-SB,BiauKai,全字庫正楷體,TW-Kai,'Source Sans Pro', Helvetica, sans-serif;
}TagName{
(Attribute)
}p{
background: black;
color: white;
}#IdName{
(Attribute)
}#center{
text-align: center;
}.ClassName{
(Attribute)
}.blue{
color: blue;
}試著以選擇器達成Demo中的效果
符合所有選擇器
Selector1Selector2{
(Attribute)
}p.blue{
color:blue;
}符合任一選擇器
Selector1,Selector2{
(Attribute)
}h1,.blue{
color:blue;
}符合Selector2且位於Selector1中
Selector1 Selector2{
(Attribute)
}div p{
color:blue;
}符合Selector2且是Selector1的子代
Selector1>Selector2{
(Attribute)
}div>p{
color:blue;
}符合Selector2且同層並緊鄰Selector1
Selector1+Selector2{
(Attribute)
}p+p{
color:blue;
}符合Selector2且同層並位於Selector1之後
Selector1~Selector2{
(Attribute)
}#aa~p{
color:red;
}試著以關係選擇器與標籤名達成Demo中的效果
div#box1{
(Attribute)
}
span.output{
(Attribute)
}
div#content.main.center{
(Attribute)
}div h2,p{
(Attribute)
}(div h2),(p)p{
color:blue;
color:red;
}p{
color:red;
}<p style="color:green;">abc</p>#aa{
color:red;
}
p{
color:blue;
}.bb{
color:red;
}
p{
color:blue;
}*{
color:red;
}
p{
color:blue;
}#aa{
color:red;
}
p{
color:yellow;
}
p.bb.cc{
color:green;
}div span p{
color:yellow;
}
div p{
color:red;
}
p{
color:green;
}p{
color:red;
}
p{
color:green;
}* p{
color:red;
}
p{
color:green;
}html>body#aa{
color:red;
}
p{
color:green;
}