标签选择器： HTML标签作为选择器，如：
p{color:red;}类选择器：
为HTML标签添加class属性通过类选择器来为具有此class属性的元素设置css样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <style type="text/css"> .red{color:red;} </style> </head> <body> <h1 class="red">类选择器</h1> </body> </html>ID选择器
为HTML标签添加ID属性通过ID选择器来为具有此ID的元素设置css样式 ps:id属性唯一，多个标签不能共用一个id； <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <style type="text/css"> #red{color:red;} </style> </head> <body> <p id="red">id选择器</p> </body> </html>群组选择器： 集体统一设置样式，如： p,h1,h2,h3,h4{font-size:30px;}
全局选择器： 对所有标签设置样式，代码如下： *{margin:0;}
后代选择器： 值用后代选择器设置，之间用空格隔开，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <style type="text/css"> /*设置div标签下的p标签样式*/ div p{font-size: 20px;} </style> </head> <body> <p>后代选择器</p> <div> <p>后代选择器</p> </div> </body> </html>伪类选择器： 其他元素：
:hover 用于设置鼠标经过某个元素时的样式:active 用于该元素被激活时（即按下鼠标之后到松开鼠标之前的时间） ps:ie6不支持除a标签外的:hover和:activea链接的4种状态（伪类）：
:link 未访问的链接:visited 已访问的链接:hover 鼠标悬停状态:active 激活的链接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <style type="text/css"> h2{color: black} h2:hover{color: red;} h2:active{color: yellow;} a{ text-decoration: none; color: black; } a:link{color:green;} a:visited{color:blue;} a:hover{color:gray;} a:active{color:red;} </style> </head> <body> <h2>伪类选择器1</h2> <a href="#">伪类选择器2</a> </body> </html>链接伪类的顺序：:link>:visited>:hover>:active 说明：
a:hover必须置于:link和:visited之后才生效a:active必须置于a:hover之后才有效伪类名称对大小写不敏感