HTML學習筆記 CSS學習選擇器案例 第五節 (原創) 參考使用表
阿新 • • 發佈:2017-09-13
樣式 back ack aid head 派生選擇器 char logs pan
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="tzy.css" type="text/css"> <style type="text/css"> [title]{ /*屬性選擇器*/ color: brown; } [title=te]{ /*屬性選擇器加值選擇器*/ color: cadetblue; } </style> </head> <body> <h1> 應用了樣式表 </h1> <h2>樣式2</h2> <h3>樣式3</h3> <p><strong>這個樣式引用strong派生選擇器</strong></p> <ul> <li> <strong>這個會被li strong派生選擇器選擇</strong> </li> </ul> <div id="pid"><p>這個會引用ID選擇器</p></div> <p id="ppd">這個會使用id選擇器<a href="http://www.baidu.com">這個會使用派生選擇器</a></p> <p class="pclass">這個會引用類選擇器</p> <p class="pclass">這個會使用類選擇器<a href="http://www.baidu.com">這個會使用派生選擇器</a></p> <p title="p">屬性選擇器引用 為指明值的可以隨便寫</p> <p title="te">屬性選擇器引用 指明值的如果寫的不一樣就執行沒指明值的選擇器</p> <p title="te1">屬性選擇器引用 指明值的如果寫的不一樣就執行沒指明值的選擇器</p> <p id="p1"> 拯救大兵瑞恩 <span>白蛇傳<span>獨立宣言</span></span> </p> <p>拯救大兵<span>白蛇傳<span>肚子大了</span></span></p> </body> </html>
h2,h1{ /*選擇器分組*/ color: blue; font-family: 楷體; font-size: 50px; } body{ /*沒有定義樣式的就會引用BODY裏的樣式(可以理解為繼承)*/ color: aqua; } li strong{ /*派生選擇器*/ color: bisque; } strong{ /*派生選擇器*/ color: #FF00FF; } p span span{ /*派生選擇器*/ font-family:"楷體"; } #p{ /*id選擇器用#使用*/ color: aquamarine; } #ppd a{ /*id選擇器和派生選擇器一起使用*/ color: blueviolet; } .pclass{ /*類選擇器用.使用*/ color: darkgreen; } .pclass a{ /*類選擇器和派生選擇器一起使用*/ color: blue; }
HTML學習筆記 CSS學習選擇器案例 第五節 (原創) 參考使用表