HTML5开发系列（6）之 CSS三大特性

最新推荐文章于 2021-08-09 23:36:17 发布

启之灵

最新推荐文章于 2021-08-09 23:36:17 发布

阅读量261

点赞数

分类专栏： Html 5 文章标签：权重

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/82504068

版权

Html 5 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

1.层叠性

当同一个标签定义了多个样式的时候，就存在样式属性冲突，样式属性相同则被覆盖；

当css样式冲突的时候会执行后定义的样式，如果样式属性不冲突则分开执行；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				color: red;
				font-size: 20px;
			}
			
			div{
				color: blue;
			}
			
			/*这里就存在多样式属性冲突问题,最后会显示blue,和font-size这个两个;*/
		</style>
	</head>
	<body>
		<div>我是于给div</div>
	</body>
</html>

2.样式的继承性

当给父类设置相关的属性后，子标签会继承父类的这些属性显示出来，但是不是所有的属性样式都是可以继承的；

可以继承的属性有：text- 、 font- 、line- 开头的，以及color属性；

3.css的优先级

一个标签元素，可能会有多个选择器，但是谁会是最终的执行效果呢？这里就涉及到了选择器的优先级了；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*0001*/
			li{
				color: red;
			}
			/*0010>0002...0003*/
			.li1{
				color: orange;
			}
			
			/*0001+0001=0002*/
		    ul li{
				color: blue;
			}
			
		
		</style>
	</head>
	<body>
		<nav >
			<ul >
				<li class="li1">李白</li>
				<li class="li1">李白</li>
				<li class="li1">李白</li>
				<li class="li1">李白</li>
			</ul>
		</nav>
	</body>
</html>

选择器权重的叠加效果：

ps：继承的权重为0；

启之灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5开发系列（6）之 CSS三大特性

1.层叠性当同一个标签定义了多个样式的时候，就存在样式属性冲突，样式属性相同则被覆盖；当css样式冲突的时候会执行后定义的样式，如果样式属性不冲突则分开执行；&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
复制链接

扫一扫