基本选择符 · 跟涛哥学前端

[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> ~~~