CSS布局-优先级的权重，及其计算。Chome调试工具
CSS布局-优先级的权重，及其计算。Chome调试工具
学习目标：
◆ 能够认识不同选择器的 优先级 公式
◆ 能够进行 CSS 权重叠加计算，分析并解决CSS 冲突问题
◆ 能够认识 盒子模型 的组成部分
◆ 能够掌握盒子模型的 边框、内边距、外边距 的作用及简写形式
◆ 能够计算盒子的 实际大小
◆ 能够了解 外边距折叠现象，并知道如何解决 盒子塌陷问题
3.1 优先级的介绍
➢ 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
➢ 优先级公式：
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
➢ 注意点：
\1. !important写在属性值的后面，分号的前面！
\2. !important不能提升继承的优先级，只要是继承优先级最低！
\3. 实际开发中不建议使用 !important 。
3.2 权重叠加计算
（拓展）权重叠加计算案例
➢ 权重计算题解题步骤：
\1. 先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
\2. 通过权重计算公式，判断谁权重最高
➢ 注意点：
• 实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己
关于权重叠加的测试题：
第一题：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第1题：普通题</title>
<style>
/* (行内, id, 类, 标签) */
/* !important 最高 */
/* 继承: 最低 */
/* (0, 2, 0, 0) */
#father #son {
color:blue;
}
/* (0, 1, 1, 1) */
#father p.c2 {
color:black;
}
/* (0, 0, 2, 2) */
div.c1 p.c2 {
color:red;
}
/* 继承, 最低 */
#father {
color:green !important;
}
/* 继承, 最低 */
div#father.c1 {
color: yellow ;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
这行文本是什么颜色的？
</p>
</div>
</body>
</html>
第二题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第2题: 标签选择器选择一类</title>
<style>
/* (行内, id, 类, 标签) */
/* !important 最高 */
/* 继承: 最低 */
/* 2 */
div div {
color: skyblue;
}
/* 1 */
div {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<div>
这行文本是什么颜色？
</div>
</div>
</div>
</body>
</html>
第三题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第3题: 权重叠加每位不存在进制</title>
<style>
/* (行内, id, 类, 标签) */
div div div div div div div div div div div div {
color: red;
}
.one {
color: pink;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="one">这行文字是什么颜色的？</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
第四题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第4题：权重相同此时比较层叠性</title>
<style>
/* (0, 0, 2, 1) */
.c1 .c2 div {
color: blue;
}
/* 这里优先级一样的情况，离得近的优先。 */
/* (0, 1, 0, 1) */
#box1 div {
color: yellow;
}
/* (0, 1, 0, 1) */
div #box3 {
color: green;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
这行文本是什么颜色的？
</div>
</div>
</div>
</body>
</html>
第五题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第5题: 全是继承的特殊情况</title>
<style>
/* 都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效 */
/* 继承 */
div p {
color:red;
}
/* 继承 */
.father {
color:blue;
}
</style>
</head>
<body>
<div class="father">
<p class="son">
<span>文字</span>
</p>
</div>
</body>
</html>
Chrome调试工具学习：
（拓展）查错流程 （遇到样式出不来，要学会通过调试工具找错）
例子：
