一、标签选择器
标签{属性：值;}
特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ font-size: 50px; color: green; background-color: yellow; width: 400px; } p{ background-color: blue; } </style> </head> <body> <div>我是一个好人</div> <div>你也是个好人</div> <p>这是一个段落</p> <p>这是另外一个段落</p> </body> </html>
二、类选择器
.自定义类名{属性:值; 属性:值；}
特点： 谁调用，谁生效。一个标签可以调用多个类选择器。多个标签可以调用同一个类选择器。
类选择器命名规则：①不能用纯数字或者数字开头来定义类名
②不能使用特殊符号或者特殊符号开头（_）来定义类名
③不建议使用汉字来定义类名
④不推荐使用属性或者属性的值来定义类名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { font-size: 40px; color: rgba(00,255,00,0.5); width: 300px; height: 300px; background-color: #999; } .miss { text-align: center; text-indent: 2em; } </style> </head> <body> <div class="box">不能用纯数字或者数字开头来定义类名</div> <div class="box miss">不能使用特殊符号或者特殊符号开头</div> <p class="box">不建议使用汉字来定义类名</p> <p class="miss">不推荐使用属性或者属性的值来定义类名</p> <p>一个标签可以调用多个类选择器。多个标签可以调用同一个类选择器</p> </body> </html>
三、ID选择器
#自定义名称{属性:值;}
特点：
一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。
一个标签只能调用一个ID选择器。
一个标签可以同时调用类选择器和ID选择器。
<style type="text/css"> #box { font-size:20px; color: rgb(0,0,255); background-color: yellow; } #miss { text-align: center; } .box{ text-indent: 2em; } </style> </head> <body> <div id="box" class="box">一个ID选择器在一个页面只能调用一次。</div> <div id="miss" class="box"> 如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。</div> <p class="box">一个标签可以同时调用类选择器和ID选择器。</p> <p>一个标签只能调用一个ID选择器。</p> </body>
四、通配符选择器
*{属性:值;}
特点：给所有的标签都使用相同的样式。
不推荐使用，增加浏览器和服务器负担。
<style type="text/css"> * { font-size: 20px; color: chartreuse; } </style> </head> <body> <div>给所有的标签都使用相同的样式。</div> <div>不推荐使用，</div> <p>增加浏览器和服务器负担。</p> <p>增加浏览器和服务器负担。</p> <span>增加浏览器和服务器负担。</span> </body>