1. 层叠解决样式的三个冲突方案
- 样式表的来源
- 选择器的优先级
- 源码的顺序
2.样式表的来源 （自定义样式）
- 当前文档：
<style> - 当前元素属性：
style="..." - 外部公共样式：
common. css,JQuery.css,layui.css,<link>引用
3.选择器的优先级
- `tag(标签) < class（类） < id
4.选择器的优先级方案
| 案例 | id | class | tag | 标识 |
|---|---|---|---|---|
html body header h1 |
0 | 0 | 4 | 0, 0, 4 |
body header h1 |
0 | 0 | 3 | 0, 0, 3 |
.page-header .title |
0 | 2 | 0 | 0, 2, 0 |
#page-title |
1 | 0 | 0 | 1, 0, 0 |
5.代码如下
1.
html body header h1 > body hedaer h1
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器的优先级</title>
<style>
/ 这里是tag选择器 :html ,head ,body, h1/
/ 属性：color 值：gold /
/ 0,0,4 / id=0,class=0 ,tag=4 /
html body header h1 {
color: gold;
}
/ 这里是选择器 /
/ 0,0,3 / id=0，class=0，tag=3 /
body header h1 {
color: darkred;
}
/ 这里是class选择器，使用class选择器可以实现样式复用 /
.A {
color: saddlebrown;
}
</style></head><body><header class="page-header"><h1 class="title" id="page-title">了解选择器的优先级</h1><!-- class（类）样式可以实现样式复用 --><h2 class="A">css是什么？</h2><p class="A">css是层叠样式表</p><h3 class="A">css不是编程语言</h3></header></body>
</html>`
2.
.page-header .title > body header h1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器的优先级</title>
<style>
/ 这里是选择器 /
/ 0,0,3 / id=0，class=0，tag=3 /
body header h1 {
color: darkred;
}
/ 0,2,0 /
.page-header .title {
color: rgb(18, 12, 31);
}
/ 这里是class选择器，使用class选择器可以实现样式复用 /
.A {
color: saddlebrown;
}
</style></head><body><header class="page-header"><h1 class="title" id="page-title">了解选择器的优先级</h1><!-- class（类）样式可以实现样式复用 --><h2 class="A">css是什么？</h2><p class="A">css是层叠样式表</p><h3 class="A">css不是编程语言</h3></header></body>
</html>`
3.
#page-title > .page-header .title
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器的优先级</title>
<style>
/ 0,2,0 /
.page-header .title {
color: rgb(18, 12, 31);
}
/ 1,0,0 最大及级 /
#page-title {
color: yellowgreen;
}
/* 这里是class选择器，使用class选择器可以实现样式复用 */.A {color: saddlebrown;}</style></head><body><header class="page-header"><h1 class="title" id="page-title">了解选择器的优先级</h1><!-- class（类）样式可以实现样式复用 --><h2 class="A">css是什么？</h2><p class="A">css是层叠样式表</p><h3 class="A">css不是编程语言</h3></header></body>
</html>`