1、超链接样式选择器
a{...} 选择所有状态的超链接。
a:link{ ...} 选择所有未访问过的超链接。
a:visited{ ...} 选择所有已访问过的超链接
a:hover{ ...} 选择当前鼠标停留的超链接。
a:active{ ...} 选择当前鼠标按下时的超链接。
注意：a:hover应该写在a:active的前面，否则a:active的效果可能无法体现。
2、混合样式选择器
要将css样式应用到HTML标记上，除了重定义标签和自定义样式之外，还有它们的组合形式。
h1 span{……} --选择所有h1标记内部的span标记
div ul li {……} --选择所有div标记内的ul标记内的li标记
.xx p {……} --选择所有应用了xx样式的标记内的p标记
p.xx{……} --该样式只应用于<p class="xx">标记
p a:hover {……} --选择所有p标记内的当前超链接
p *{……} --选择所有p标记内的所有子标记的
a:hover span{……} --选择所有当前超链接内的span标记
p>a{......} --选择所有父标记为p标记的a标记
#xx{....} --选择id为xx的标记，每个html标记都可以设置一个id属性，如：<p id="xx">
3、样式的继承与叠加
一个html标记上可以同时添加多个自定义样式，同时它还会从父标记继承一些样式，例如：
<p class="样式1">
<span class="样式2 样式3 样式4" style="样式5">文本内容</span>
</p>
“文本内容”上一共叠加了5个样式，不冲突的样式全部叠加，冲突的参考CSS优先级。
重复定义样式
.xx{CSS代码}
.xx{CSS代码} 样式会叠加
p{color:red}
p{background:blue}
多重定义
如果多个样式选择器共用同一段css代码，可以写在一起，只需用逗号隔开。
.aa,.bb……{CSS代码...}
p,h1……{CSS代码...}
.aa,p,#id{CSS代码...}
4、CSS的优先级
理论上，选择范围越精确的样式具有更高的优先级。样式代码后面加!important可以将这一句css优先级提升到最高级别，例如：p{color:red!important;} 则所有段落文字都是红色，用其他选择器绝对改不了。除此之外优先级最高的就是内联样式，就是直接在标记上加 style="css代码..."。
以下优先级从低到高：
从父标记继承样式
*{color:#0FF}
p{color:blue}
.xx{color:red}
.qq{color:#9C0}
/*如果一个标记上同时应用可xx和qq样式，qq样式优先级高一些，因为在样式表中qq写在后面*/
.yy p{color:yellow}
p.xx{color:#F0F}
#ss{color:#600}
#pp p{color:#CF0}
p#ss{color:#63F}
p{color:#060!important;}
以下代码可以验证上面的css优先级
<div class="yy" id="pp">
<p class="xx qq" style="color:#F60" id="ss">hello</p>
</div>
5、导入外部样式文件
将css代码写在html文件中并非理想的做法，不仅使代码变得混乱，而且css代码不能被多个html文档共用。我们可将css代码写在一个样式文件（扩展名为.css的文本文件）中。然后在html文档的<head>标记内引入该样式文件。
<link rel="stylesheet" href="css文件名" type="text/css">
任何网页文件中需要用到这个样式文件的样式代码，只需加入这一句。
特别注意
在CSS文件内使用相对路径定位图片时，是相对于该CSS文件的位置，而不是相对于调用它的网页文件。
CSS注释
/* */
在线咨询