首页 >web前端 >css教程 >如何理解CSS层叠样式

如何理解CSS层叠样式

清浅原创: 2019-02-28 11:40:164063浏览

CSS层叠性就是浏览器处理冲突的一个特性，在CSS层叠样式冲突中有引用方式冲突，继承方式冲突，指定样式冲突。当指定样式和继承样式调试发生冲突以指定样式冲突为准

CSS具有三大特性分别为继承、优先级和层叠。今天将要介绍的是CSS三大特性中的层叠性，具有一定的参考价值，希望对大家有所帮助

如何理解CSS层叠样式

【推荐课程：CSS教程】

CSS层叠性

CSS层叠性就是浏览器处理冲突的一个特性，如果一个属性中设置了多个选择器，那么这个时候只会有一个选择器起到作用，其他的选择器都将会被层叠的部分去掉。

层叠性的条件

（1）元素相同

（2）属性相同

（3）优先级相同

层叠性的样式冲突

（1）引用方式冲突

CSS的引用方式包括内联样式、内嵌样式、导入样式、链接样式，四个的优先级顺序分别是内联样式>内嵌样式>导入样式>链接样式

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" src="style.css">
<style>
	body{
		background-color: pink;
	}
</style>
<body>
	<h1 style="background-color: red">优先级</h1>
</body>
</html>

效果图如下：

如何理解CSS层叠样式

（2）继承方式冲突

在CSS中有一些属性当给自己设置时会连带着自己的后代都继承上该属性值，例如CSS中设置颜色，字体大小，字体形状，对齐等等这些属性就会继承。但是有关于盒子，定位，布局等属性就不会发生继承

继承方式冲突就是显示跟自己最近的父元素而不是所有的父元素

例：

<style type="text/css">
		body{
			color: pink;
		}
		#father{
			color: red;
		}
		#grandfather{
			color: blue;
		}
	</style>
</head>
<body>
	<div id="grandfather">
		<div id="father">
			<div>
				<h1>继承冲突</h1>
			</div>
		</div>
	</div>

效果图如下：

如何理解CSS层叠样式

（3）指定样式冲突

有时候我们在给元素指定样式时会因为权重的不同而产生冲突。在这里还需要注意只有当权重相同时,才会根据“后来居上”原则

<style type="text/css">
		body{
			color:black;
		}
		.father{
			color:yellow;
		}
		#son{
			color:green;
		}
	</style>
</head>
<body>
	<div id="son" class="father">
		<h1>继承冲突</h1>
	</div>
</body>

效果图如下：

Image 080.png

由于id选择器的权重为100，而元素选择器的权重为1，所以最后字体的颜色显示的时id选择器中所设置的属性

注意：在页面发生继承样式与指定样式同时冲突时，以指定样式优先。当属性设置！important时优先级可以改变，该样式可以覆盖在其他任何样式上。

总结：以上就是本篇文章的全部内容了，希望对大家有所帮助。

以上是如何理解CSS层叠样式的详细内容。更多信息请关注PHP中文网其他相关文章！

css 继承选择器

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：css direction属性怎么用？下一篇：清除浮动和闭合浮动的介绍

查看更多