基本選擇符 · 跟濤哥學前端

[TOC] ## 1. 基本選擇符 ### 通配選擇符 * { sRules } 說明：選定所有對象。通配選擇符(Universal Selector) 通常不建議使用通配選擇符，因為它會遍歷并命中文檔中所有的元素，出于性能考慮，需酌情使用 ~~~ /*通配選擇符 * */ *{ font-size: 20px; color:red; } ~~~ ### 標簽選擇符 E { sRules } 根據標簽選擇元素 ~~~ /*標簽選擇符 E */ P{ background: #ccc; } a{ text-decoration: none; } ~~~ ### ID選擇符 E#myid { sRules } 以唯一標識符id屬性等于myid的E對象作為選擇符。 id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。 HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。 ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。 ~~~ /*ID */ #div1{ width: 200px; height:200px; border:2px solid #0000FF; } ~~~ ### 類選擇符 E.myclass { sRules } 以class屬性包含myclass的E對象作為選擇符。類選擇符(Class Selector) 不同于ID選擇符的唯一性，類選擇符可以同時定義多個，如： ~~~ /*class*/ .box{ width: 100px; height: 300px; border:5px solid #000333; } ~~~ * * * * * **基本選擇器完整代碼** ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*通配選擇符 * */ *{ font-size: 20px; color:red; } /*元素選擇符 E */ P{ background: #CCC; } /*ID */ #div1{ width: 200px; height:200px; border:2px solid #0000FF; } /*class*/ .box{ width: 100px; height: 300px; border:5px solid #000333; } a{ text-decoration: none; } </style> </head> <body> <div id="div1">#div1</div> <div class="box">.box</div> <p>段落</p> <h1>標題</h1> </body> </html> ~~~