电话
13363039260
如何理解CSS层叠样式？
2024-01-17 16:04 小编
CSS层叠性
CSS层叠性就是浏览器处理冲突的一个特性，如果一个属性中设置了多个选择器，那么这个时候只会有一个选择器起到作用，其他的选择器都将会被层叠的部分去掉。
层叠性的条件
（1）元素相同
（2）属性相同
（3）优先级相同
层叠性的样式冲突
（1）引用方式冲突
CSS的引用方式包括内联样式、内嵌样式、导入样式、链接样式，四个的优先级顺序分别是内联样式>内嵌样式>导入样式>链接样式
例：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<linkrel="stylesheet"type="text/css"src="style.css">
<style>
body{
background-color:pink;
}
</style>
<body>
<h1style="background-color:red">优先级</h1>
</body>
</html>
（2）继承方式冲突
在CSS中有一些属性当给自己设置时会连带着自己的后代都继承上该属性值，例如CSS中设置颜色，字体大小，字体形状，对齐等等这些属性就会继承。但是有关于盒子，定位，布局等属性就不会发生继承
继承方式冲突就是显示跟自己最近的父元素而不是所有的父元素
例：
<styletype="text/css">
body{
color:pink;
}
#father{
color:red;
}
#grandfather{
color:blue;
}
</style>
</head>
<body>
<divid="grandfather">
<divid="father">
<div>
<h1>继承冲突</h1>
</div>
</div>
</div>
（3）指定样式冲突
有时候我们在给元素指定样式时会因为权重的不同而产生冲突。在这里还需要注意只有当权重相同时,才会根据“后来居上”原则
<styletype="text/css">
body{
color:black;
}
.father{
color:yellow;
}
#son{
color:green;
}
</style>
</head>
<body>
<divid="son"class="father">
<h1>继承冲突</h1>
</div>
</body>
Image080.png
由于id选择器的权重为100，而元素选择器的权重为1，所以最后字体的颜色显示的时id选择器中所设置的属性
注意：在页面发生继承样式与指定样式同时冲突时，以指定样式优先。当属性设置！important时优先级可以改变，该样式可以覆盖在其他任何样式上。
总结：以上就是本篇文章的全部内容了，希望对大家有所帮助。
猜你喜欢
联络方式：
13363039260
微信二维码 