|
在前面，咱们学习了样式表引入的优先级判断。倘若多个选取器都来修饰同一个元素，优先级又该怎样判断呢？
咱们来看一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选取器权重——一个例子</title>
<style>
#h-one {
color: blue
}
* {
color: orange
}
.header {
color: green
}
h1 {
color: red
}
</style>
</head>
<body>
<h1 class="header" id="h-one" style="color: purple">
学历和能力哪个更要紧？
</h1>
</body>
</html>
仔细观察一下，h1 元素同期存在内联样式和内部样式的修饰。内部样式的 ID 选取器、通用选取器、类选取器和元素选取器，亦都指向了 h1 元素。
多个样式功效于同一个元素，是冲突的，到底哪个优先级更高呢？
此刻，标题文本的颜色你必定晓得，是紫色。由于内联样式优先级高于内部样式。
倘若把内联样式删掉，标题的文本会是什么颜色呢？
咱们看，是蓝色！说明这四个选取器，ID 选取器优先级最高。
去掉 ID 选取器，标题变成为了绿色！说明这三个选取器，类选取器优先级最高。
再去掉类选取器，标题变成为了红色！说明元素选取器优先级高于通用选取器。
最后去掉元素选取器，标题变成为了橙色！说明这儿通用选取优先级最低。
经过这个例子，咱们能够总结一个规律：行内样式优先级大于ID选取器，大于类选取器，大于元素选取器，大于通用选取器。然则，光把握这个规律还不足，遇到有些更繁杂选取器，就比较难判断了。
咱们再看一个案例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 选取器权重——第二个例子</title>
<style>
p { /* 1 */
color: purple;
}
div p { /* 1 + 1 = 2 */
color: green;
}
.box p { /* 10 + 1 = 11 */
color: orange;
}
#box p { /* 100 + 1 = 101 */
color: red;
}
div#box p { /* 1 + 100 + 1 = 102 */
color: blue;
}
</style>
</head>
<body>
<p>我觉得能力更 要紧！</p>
<div class="box">
<p>其实这 没非是证明自己价值、或被别人认可的一种方式，从客观的 方向来讲，当你大学刚毕业的时候， 无工作经验，那学历肯定是让别人认可你的 第1方式。</p>
</div>
<div id="box">
<p | 
发表于 2024-6-30 06:48:32
楼主