CSS样式表的层叠关系
一、CSS样式
1、样式分类
A、外部样式表
<link rel="stylesheet" type="text/css" href="样式表的URL"/>
B、嵌入式样式表
<style type="text/css">
适用于下面的选择器
</style>
C、内嵌样式表
<body style="color: aqua">
2、样式规则
A、选择器（body）
I 元素选择器
<style>
p{color: aqua}
</style>
II 类（class）选择器
<style>
.abc{font-size: large }
</style>
<p class="abc">你好</p>
III ID选择器
<style>
#ab{width: 300em}
</style>
<h1 id="ab">你好</h1>
IIII 包含选择器
1、样式分类
A、外部样式表
<link rel="stylesheet" type="text/css" href="样式表的URL"/>
B、嵌入式样式表
<style type="text/css">
适用于下面的选择器
</style>
C、内嵌样式表
<body style="color: aqua">
2、样式规则
A、选择器（body）
I 元素选择器
<style>
p{color: aqua}
</style>
II 类（class）选择器
<style>
.abc{font-size: large }
</style>
<p class="abc">你好</p>
III ID选择器
<style>
#ab{width: 300em}
</style>
<h1 id="ab">你好</h1>
IIII 包含选择器
<style>
h2 em{color: brown}
</style>
<h2>你好 <em>here</em></h2>![]()
V 通配符选择器（选择所有元素）
<style>
*{color: darkblue}![]()
</style>
Vi 伪类选择器
<style>
a:link{color: chartreuse}
a:hover{color: brown}
a:visited{color: darkviolet}
a:active{color: hotpink}
</style>
<a href="http://www.baidu.com">百度</a>
VII 伪元素选择器
<style>
p:first-line{font-weight: 700}
P:first-letter{font-size: large}
</style>
<p class="abc">你好</p>
h2 em{color: brown}
</style>
<h2>你好 <em>here</em></h2>
V 通配符选择器（选择所有元素）
<style>
*{color: darkblue}
</style>
Vi 伪类选择器
<style>
a:link{color: chartreuse}
a:hover{color: brown}
a:visited{color: darkviolet}
a:active{color: hotpink}
</style>
<a href="http://www.baidu.com">百度</a>
VII 伪元素选择器
<style>
p:first-line{font-weight: 700}
P:first-letter{font-size: large}
</style>
<p class="abc">你好</p>
二、交集选择器（无空格）
<style>
div.text1{
color: #0000FF;
}
p.text1{
color: red;
}
</style>
。。。
<div class="text1">你好</div>
<p class="text1">你好</p>
<div class="text1">你好</div>
<p class="text1">你好</p>
三、并集选择器
<style>
.text1,.text2,.text3{
color: blueviolet;
}
</style>
。。。
<div class="text1">你好</div>
<p class="text2">你好</p>
<div class="text3">你好</div>
<p class="text4">你好</p>
<div class="text5">你好</div>
<p class="text6">你好</p>
三、后代选择器（作用范围是 div 以下所有元素）
<style>
.outer div{
font-size: 20px;
}
</style>
。。。
<div class="outer">
<div class="text1">
<p class="text2">你好</p>
<div class="text3">你好</div>
</div>
<p class="text4">你好</p>
<div class="text5">你好</div>
<p class="text6">你好</p>
</div>
四、扩展后代选择器（作用范围为某个元素而不是向下所有）
<style>
.outer>.text1>.text2{
font-size: 20px;
}
</style>
。。。
<div class="outer">
<div class="text1">
<p class="text2">你好</p>
<div class="text3">你好</div>
</div>
<p class="text4">你好</p>
<div class="text5">你好</div>
<p class="text6">你好</p>
</div>
五、样式表的层叠关系
优先级强弱由低到高为：外部样式<link href=""/>、嵌入式<style></style>、内联式<a style=""></a>
a、权值（当选择器冲突，按权值设置样式顺序，权值越高，以高为准）
从低到高依次为： 元素选择器<p> 权值：1
类别选择器<class> 权值：10
ID选择器<id> 权值：100
内联式<a style=""> 权值：1000
！important 权值：级别最高
例子：.outer(类名)>.inner(类名)>.text(类名)｛权值：10+10+10=30｝ 以权值为30为准。
.text{权值：10}
#text{权值：100} 以权值为100为准。
一般是按照 CSS规则的重要性和来源
CSS规则的特殊性
CSS规则在文档中出现的顺序
