第七课 css选择器与优先级-html+css-教学资料-长沙网学教育科技有限公司官网

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标记上可以同时添加多个自定义样式，同时它还会从父标记继承一些样式，例如：

“文本内容”上一共叠加了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注释

/* */