Html5與CSS3(選擇器)
阿新 • • 發佈：2018-04-27
off itl ima blue oct inf width 優先級 line
id的優先級高於類選擇器，元素選擇器，全選選擇器
5.分組(對於標簽而言)選擇器
標簽名1，標簽名2{屬性1:屬性值2；屬性2：屬性值2；...；}
6.子代選擇器
標簽名>標簽名{屬性1:屬性值2；屬性2：屬性值2；...；}
7.後代選擇器
標簽名 標簽名{屬性1:屬性值2；屬性2：屬性值2；...；}
-->
<!--
作者：offline
時間：2018-03-21
描述：1.全選擇器
*{屬性1:屬性值2；屬性2：屬性值2；...；}
2.元素（標簽）選擇器
標簽名{屬性1:屬性值2；屬性2：屬性值2；...；}
元素（標簽）選擇器優先與全選擇器
3.類（class）選擇器
.類名{屬性1:屬性值2；屬性2：屬性值2；...；}
類選擇器高於全選擇器
類選擇器高於元素選擇器
4.id選擇器
#id名{屬性1:屬性值2；屬性2：屬性值2；...；}
id的優先級高於類選擇器，元素選擇器，全選選擇器
5.分組(對於標簽而言)選擇器
標簽名1，標簽名2{屬性1:屬性值2；屬性2：屬性值2；...；}
6.子代選擇器
標簽名>標簽名{屬性1:屬性值2；屬性2：屬性值2；...；}
7.後代選擇器
標簽名 標簽名{屬性1:屬性值2；屬性2：屬性值2；...；}
-->
1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"lang="en"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title></title> 6 <style type="text/css"> 7 8 p,span,h1,h2{ 9 10 font-size: x-large;11 12 } 13 .c1{ 14 background-color: #7FFF00; 15 } 16 p{ 17 background-color: cadetblue; 18 } 19 20 21 #d1{ 22 width: 600px; 23 height: 500px; 24 font-family: "agency fb"; 25 border: 1px solid yellow; 26 } 27 #d2{ 28 width: 400px; 29 height: 300px; 30 font-family: "agency fb"; 31 border: 1px solid goldenrod; 32 } 33 34 35 36 #d1>span{ 37 color: #DAA520; 38 } 39 #d1 span,h1,h2{ 40 color:chartreuse; 41 } 42 43 44 </style> 45 </head> 46 <body> 47 48 49 <p>段落標簽</p> 50 <span class="c1" >文本標簽</span> 51 <div id="d1"> 52 <span>文本標簽</span> 53 <span></span> 54 <div id="d2"> 55 <h1>一級標簽</h1> 56 <h2>二級標簽</h2> 57 </div> 58 </div> 59 60 61 </body> 62 </html>
Html5與CSS3(選擇器)