css:权重计算
css三大特性
三大特性：层叠级、继承级、优先级
层叠性
当样式覆盖（冲突）的时候，就会取离结构近的样式（也就是写得靠后的样式）
只有冲突的时候才覆盖，下图的代码只有颜色会根据就近原则，而字体没有冲突
呈现的就是12px大小的blue颜色
.nav{
color: aquamarine;
font-size:12px;
}
.nav{
color:blue;
}继承性
子标签继承父类标签的属性，比如文本颜色和字号
子标签如果指定有样式就按自己的样式，如果没有就继承自己父亲的，如果自己父亲也没有就继承它父亲的父亲(这句是优先级的体现)
继承性可以简化我们的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: blue;
}
</style>
</head>
<section></section>
<body>
<div>
<p>你们好啊我是div的子</p>
</div>
</body>
</html>下图的inherited就是继承的意思，p的属性继承自div的属性
一般text- font- line-开头的属性可以继承，color属性也可以，但是高度、宽度这些继承不了
行高的继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
color: blue;
font: 12px/24px 'microsoft yahei';
}
</style>
</head>
<section></section>
<body>
<div>你们好啊我是div</div>
<p>你们好啊我是p</p>
</body>
</html>可以看见子标签继承了body标签的属性
有时候我们的行高会这样表示
body {
color: blue;
font: 12px/1.5 'microsoft yahei';
}后面的1.5没单位，代表着继承body的行高时，要用自己的文字大小（size）乘自己当前行高的相应倍数，在这里就是1.5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
color: blue;
font: 12px/1.5 'microsoft yahei';
}
div {
font-size: 14px;
/* 因为层叠性，所以div的大小为14px
因为行高继承性，所以div的行高是14*1.5==21px */
}
</style>
</head>
<section></section>
<body>
<div>你们好啊我是div</div>
<p>你们好啊我是p</p>
</body>
</html>我们验证一下:
不同大小的字体可以继承不同大小字体对应的行高，实现了子元素行高的“多态”
优先级
我们之前学用通配符操作样式的时候提到*优先级比较低，容易被其他样式覆盖
优先级就是代表了选择器样式在应用时的权重
| 选择器 | 选择器权重 |
| *、继承 | 0,0,0,0 |
| 元素选择器（标签选择器） | 0,0,0,1 |
| 类选择器、伪类选择器 | 0,0,1,0 |
| id选择器 | 0,1,0,0 |
| 行内样式style="" | 1,0,0,0 |
| !important重要的 | ∞无穷大 |
这个四位数字是表示权重用的，高位为1就是优先级高，不存在进位的情况
给父类写样式的时候，继承到子类就是最低权重（对应上图的继承的权重为0,0,0,0）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#sjb {
font-size: 14px;
color: brown
}
p {
color: aqua;/*#sjb是id选择器，按理来说优先级应该高于标签选择器，但是#jsb是父亲的id选择器，对于p这个儿子来说就是继承的选择器，优先级为0,0,0,0,而我们又单独把p标签拉出来定义了样式，所以就按照给p标签定义的样式来呈现*/
}
</style>
</head>
<section></section>
<body>
<div>你们好啊我是div</div>
<p>你们好啊我是p</p>
<div id="sjb">
我是div<br />
<p>我是div的子p</p>
</div>
</body>
</html>
而a链接不太一样，a链接我们默认在浏览器打开就是蓝色+下划线，这是浏览器给它默认的样式，就像它天生就自带一个：
a{
color:blue;
text-decoration: underline;
}所以这个时候也需要单独对a进行更改，对a的父标签更改是没有作用的（如上图）
权重叠加
看得我乱七八糟的！我们直接计算吧！
代码中对p进行了两次定义，div里面的p和外面的p会有什么区别呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: aqua;
}
div p {
color: gold;
}
</style>
</head>
<section></section>
<body>
<p>你们好啊我是p</p>
<div id="sjb">
<p>我是div的子p</p>
</div>
</body>
</html>结果是：div内部的p执行的是div p{}的声明，外面的p执行的是p{}的声明
他们的优先级是这样呈现的：
p==0,0,0,1(标签选择器)
div p==0,0,0,1+0,0,0,1=0,0,0,2（标签选择器+标签选择器）（之前说过，数字不进位，如果0001等级超过10的话就是0,0,0,10,逗号只有三个）
div p是复合选择器，复合选择器有权重叠加的问题
计算之后从左往右比，谁高位数字大，谁优先级的权重大，在这里0002>0001，所以div p{}的优先级高
来出个题吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav ul li {
color: pink;
}
div ul li {
color: aqua;
}
</style>
</head>
<section></section>
<body>
<div class="nav">
<ul>
<li>我是类名为nav的div下的ul下的子li</li>
</ul>
</div>
</body>
</html>来算算谁的权重大：
.nav ul li==0010+0001+0001(类选择器+标签选择器+标签选择器)==0012
div ul li==0001+0001+0001（标签选择器*3）==0003
所以是什么颜色呢？粉色！（.nav ul li{}的优先级比div ul li{}的优先级高）
还有小计算：
a:hover==0010+0001==0011
.nav a==0010+0001=0011
原文地址：https://blog.csdn.net/Au_ust/article/details/143666946
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！