CSS选择器

CSS选择器：
1.标签选择器：通过标签选择器设置样式，那使用该标签的内容都引用该样式

2.类选择器
1)为HTML标签添加class属性，<h1 class="first">内容</h1>
2)通过类选择器来为具有此class属性的元素设置CSS样式， .first{color：red;}
同一个元素可以设置多个类，之间有空格隔开：
<p class="red fsize">内容</p>
注意：可对不同标签相同class的元素设置不同的样式，例如：
<h1 class="red">内容1</h1>
<p >内容2</p>
<p class="red">内容3</p>

<style type="text/css">
p.red{font-size:50px;}
h1.red{font-size:30px;}
</style>

3.ID选择器
<p id="p1">内容</p>
<style type="text/css">
#p1{color:red;}
</style>
注意：ID值是唯一的，不能给同一个标签定义多个ID

4.全局选择器
所有标签设置样式：*{color:blue;}

5.群组选择器
集体统一设置样式：
#three，h1，p，.special{font-size: 50px;}

6.后代选择器
使用后代选择器设置，之间用空格隔开：
<em>CSS层叠样式</em>
<p><em>CSS</em>层叠样式</p>
<p><em>CSS</em>层叠样式</p>

<style type="text/css">
p em{font-size：40px;}
</style>
使得所有p标签下的所有em标签设置样式

7.伪类
链接伪类：激活状态(:active)，已访问状态(:visited)，未访问状态(:link)和鼠标悬停状态(:hover)
<style type="text/css">
a:link{color：blue;}
a:visited{color：gray;}
a:hover{color：green;}
a:active{color：orange;}
</style>

<a href="xxx.com">链接</a>
其中，:hover用于访问的鼠标经过某个元素时，:active用于一个元素被激活时(即按下鼠标之后放开鼠标之前的时间)

链接伪类的顺序
:link>:visited>:hover>:active
说明：1. a:hover必须置于a:link和a:visited之后，才有效
2.a:active必须置于a:hover之后，才有效
3.伪类名称对大小写不敏感.
IE6及更早版本，支持<a>元素的4种状态
IE6浏览器不支持其他元素的:hover和:active