每一条css样式声明由选择器和样式两部分组成，“选择器”指明了{}中的“样式”的作用对象
标签选择器：通过html代码标签选择元素。 类选择器：作用于具有特定的class属性的标签。 ID选择器：作用于具有特定id属性的标签。
类选择器和ID选择器的区别 1.因为元素的id是唯一的，不能出现两个元素具有同一个id值。ID选择器只能使用一次。而class可以使用多次，同时作用于多个元素。 2.可以为一个元素指定多个类，如，但不能为一个元素指定多个id。
子选择器：选择指定标签元素的第一代子元素 包含（后代）选择器：选择指定标签元素下的后辈元素 子选择器仅选择直接后代（第一代后代），后代选择器作用于所有后代
通用选择器：匹配html中所有标签元素，表达方法为 * {color:red;} 分组选择器 ：为多个标签元素设置同一个样式，如 h1,span{color:red;} 相当于：h1{color:red;}span{color:red;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css选择器</title> <style type="text/css"> /* id选择器*/ #test1{ width: 100px; height: 50px; border: 1px solid blue; } /*类选择器*/ .test2{ width: 100px; height: 50px; border: 1px solid red; } div{ width: 120px; height: 100px; background: orange; margin-bottom: 10px; } /*派生选择器*/ div p{ color: red; } /*标签选择器*/ p{ color: blue; } </style> </head> <body> <div id="test1">test1</div> <div class="test2">test2</div> <div>普通div <p>div中的p标签</p> </div> <p>独立p标签</p> <div>id选择器<br/>class选择器<br/> 标签选择器<br/>派生选择器<br/> </div> </body> </html>效果：
