css的三大特性以及权重问题

最新推荐文章于 2022-05-01 18:15:09 发布

Amy_Chen_White

最新推荐文章于 2022-05-01 18:15:09 发布

阅读量418

点赞数 1

文章标签： css三大特性 css的权重

本文链接：https://blog.csdn.net/weixin_43758938/article/details/100885896

版权

一.CSS的三大特性

1.css层叠性

css的层叠性是指css样式的叠加
话不多说看代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css层叠性</title>
	<style type="text/css">
		div {
			color: red;
		}
		div {
			color: blue;
		}
	</style>
</head>
<body>
	<div>hello,world</div>
</body>
</html>

请问上面显示的是什么颜色呢？没错是蓝色，这就是css的层叠性，是指浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，这时候一个属性就会将里一个属性层叠掉
一般情况下，如果出现样式冲突，则会按照css书写顺序，以最后的样式为准。

2.css继承性

继承性是指子标签会继承父标签的某些样式
其中子元素可以继承父元素的样式有text-、font-、line-、color这几个是可以继承父元素的

3.css优先级

在写css时我们经常会写很多个股则在同一个元素上，比如.nav p ul li{font-size: 14px}那么这时候就会涉及优先级的问题了。
1.说到优先级我们就要来说一下权重的问题了
我们先来说一下继承权重，继承的权重为0，看下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>继承权重</title>
	<style type="text/css">
		.nav {
			font-size: 100px;
		}
		a {
			font-size: 30px;
		}
	</style>
</head>
<body>
	<div class="nav">
		<p>
			<a href="#">百度</a>
		</p>
	</div>
</body>
</html>

这里.nav的权重是高于a的，但是为什么显示的是30px的大小呢因为本来的100px是a标签继承祖父div的，但是继承的权重为0，a标签的权重为1，所以就会显示a标签的
2.行内样式优先，行内元素的权重都非常高
3.权重相同时，css遵循就近原则，就是说靠近元素的具有最大的优先级，或者说排在最后的样式优先级最大
4.css中有一个！important命名，该命令被赋予最大的优先级无论何种情况！important都有最大的优先级

3.1css特殊性

css特殊性相当于4个jibie，值从左到右，左面的最大，一级大于一级数位之间没有进制，级别之间不可超越。（0>0>0>0）

继承或者*的贡献值	0，0，0，0
每个元素的（标签）贡献值	0，0，0，1
每个类（class），伪类（:hover)贡献值	0，0，1，0
每个ID的贡献值	0，1，0，0
每个行内贡献值	0，1，0，0
每个！important贡献值	无穷大

其中权重是可以叠加的。
请看一下下面的例子
div ul li---------> 0，0，0，3
.nav ul li-------->0, 0 ,1 ,2
a:hover ---------> 0 ,0 ,1 ,1
#nav p----------->0 ,1 ,0,1
**注意：**数位之间没有进制的，比如说0，0，0，5+0，0，0，5=0，0，0，10这个依然小于0，0，1，0的

**总结一下优先级**
！important > 行内样式 > id选择器 > 类选择器（class）、伪类选择器 > 标签选择器 > 通配符选择器（*）>

Amy_Chen_White

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css的三大特性以及权重问题

一.CSS的三大特性1.css层叠性css的层叠性是指css样式的叠加话不多说看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css层叠性</title> <style type="text/css">...
复制链接

扫一扫