CSS权重、CSS继承、默认样式

最新推荐文章于 2023-03-15 20:55:26 发布

DOM曼珠沙华

最新推荐文章于 2023-03-15 20:55:26 发布

阅读量457

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/a18792627168/article/details/106303943

版权

css 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

css权重

权重：当多个选择器选择同一个元素时，哪个样式优先级高可以通过约分的方式比较两个组合的选择器，将相同的选择器月份，剩余的进行比较。

css常用的选择器

通配选择器 *
标签选择器 div
类选择器 .class
id选择器 #id
内联样式 style=""
!important

权重

选择器	权重
内联样式 style=""	1000
id选择器 #id	100
类、属性、伪类选择器	10
标签选择器、伪元素选择器	1
通配符	0
!important	最高

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{color: red;}                 /*权重1*/
			p span{ color:blue; }          /*权重1+1 = 2*/
			.first{ color: pink; }         /*权重10*/
			#second{ color: yellow;}       /*权重100*/
		</style>
	</head>
	<body>
		<p class="first" id="second">
			p标签
			<span style="color: #000;">span标签</span>       <!--权重1000-->
			也是p标签
		</p>
	</body>
</html>

css的继承

继承是指应用在一个标签上的那些CSS属性被传到其内嵌标签上的过程。比如为父元素设置了字体颜色，子元素也会应用上相同的颜色。

当然并不是所有的样式都会被继承。

关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。

关于盒子、定位、布局、边框的属性，都不能继承。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				color: red;
				line-height: 200px;
				font-size: 40px;
				font-family: "微软雅黑";
				font-style:italic;
				font-weight: bold;
				
				width: 300px;
				height: 200px;
				background: #FFC0CB;
				border: 4px solid #000000;
			}
			#con{}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="con">css继承</div>
		</div>
	</body>
</html>

运行结果：

经过测试发现：子元素只继承了父元素关于文字类、line-height居中的属性。

默认样式

默认样式是使用标签后，标签自带的样式。

如使用div时，标签是有默认margin和padding的。

默认样式的检查方式：用border+浏览器工具来查看是否有默认样式。

例如：

font-weight: normal; font-style: normal;    /*清除斜体和加粗字体样式*/
margin: 0; padding: 0;      		/*清除块状元素边距*/
list-style: none;       		/*清除li的默认样式*/
border: none;			        /*清除img在ie下的边框*/

链接样式(这部分为自用内容)

清除的是超链接标签中的锚标签 a

清除a的默认样式：

a{
	text-decoration: none; color: #000; border: 0;
}

a操作的时候的样式：

a:link{text-decoration: none; color: #000;}
a:visited{}   			/*链接地址被访问过*/
a:hover{}   			/*鼠标移动到dom节点上*/
a:active{}    			/*鼠标点击瞬间*/

DOM曼珠沙华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS权重、CSS继承、默认样式

css权重权重：当多个选择器选择同一个元素时，哪个样式优先级高可以通过约分的方式比较两个组合的选择器，将相同的选择器月份，剩余的进行比较。css常用的选择器通配选择器 * 标签选择器 div 类选择器 .class id选择器 #id 内联样式 style="" !important权重选择器权重内联样式 style="" 1000 id选择器 #id 100 类、属性、伪类选择器 10 标签选择器、伪元素选择器 ...
复制链接

扫一扫

专栏目录