CSS特性之层叠性
程序员文章站
2022-06-04 14:41:00
...
CSS的层叠性
1、层叠性的条件
（1）元素相同
（2）属性相同
（3）优先级相同
2、层叠性的样式冲突
（1）引用方式冲突
CSS的引用方式包括内联样式、内嵌样式、导入样式、链接样式，四个的优先级内联样式>内嵌样式>导入样式>链接样式；
CSS的部分
body{
background: #000000;
}<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="Untitled-1.css" rel="stylesheet" type="text/css">
<style type="text/css">
body{
background: #0005FF;
}
</style>
</head>
<body>
<p style="background: #FD0206">优先级</p>
</body>
</html>（2）继承方式冲突
这个可以这样比喻，比如我当前的对象为儿子，那么和儿子最近是父亲，再近一点的是爷爷，，所以显示的是他父亲。
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body{
color: #0005FF;
}
#father{
color: #FBFA2E;
}
#grandfather{
color: #FD0206;
}
</style>
</head>
<body>
<div id="grandfather">
<div id="father">
<div>
<p>继承冲突</p>
</div>
</div>
</div>
</body>
</html>有一些人，会进一些死胡同里，比如我，当时不知道怎么想的，当把文本放置在“父亲”上时，而父亲本身没有带CSS样式，那么显示的是“爷爷”，还是“儿子”，这个可以比喻为当前的对象为刚出生，那么“父亲”刚出生，怎么可能有“儿子”，所以显示的是“爷爷”，其实质是因为“儿子”的范围不包括父亲。
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body{
color: #0005FF;
}
#son{
color: #26F644;
}
#grandfather{
color: #FD0206;
}
</style>
</head>
<body>
<div id="grandfather">
<div>
<p>继承冲突</p>
<div id="son">
</div>
</div>
</div>
</body>
</html>（3）指定样式冲突
当指定的样式发生冲突时，根据权重，进行比值；注意只有权重相同时，才会根据“后来居上”原则
选择器权重
| 选择器 | 权重 |
| 通配符 | 0 |
| 伪元素 | 1 |
| 元素选择器 | 1 |
| class选择器 | 10 |
| 伪类 | 10 |
| 属性选择器 | 10 |
| id选择器 | 100 |
| 行内选择器 | 1000 |
常见的伪元素有“：before”“：after”“：first-letter”“first-line”
常见的伪类：“hover”“first-child”
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--link href="Untitled-1.css" rel="stylesheet" type="text/css"-->
<style type="text/css">
body{
color:black;
}
.father{
color:yellow;
}
#son{
color:green;
}
</style>
</head>
<body>
<div id="son" class="father">
<p>继承冲突</p>
</div>
</body>
</html>（4）继承样式与指定样式冲突
当两者冲突时，以指定样式优先
（5）！important
！important可以改变优先级，如果使用它，则该样式可以覆盖在其他任何样式上面
<style>
.test {
color: #f00 !important;
color: #000;
}
.test2 {
color: #f00 !important;
}
.test2 {
color: #000;
}
</style>