标签：权重 color 标签 元素 特性 样式 三大 选择器 CSS
三大特性
CSS有三个非常重要的三个特性：
▶ 层叠性
▶ 继承性
▶ 优先级
■ 层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式
层叠性主要解决样式冲突的问题
层叠性原则：
样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠
□ 示例
div {
color: red;
font-size: 12px;
}
div {
color: pink;
}
<div> 字体颜色为粉色，而非红色，但文字大小是12px </div>
■ 继承性
子标签会继承父标签的某些样式，如文本颜色和字号
简单的理解就是：子承父业
恰当地使用继承可以简化代码，降低CSS样式的复杂性
子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承，以及color属性)
□ 示例
div {
color: pink;
font-size: 12px;
}
<div>
<p>p标签继承了div的样式</p>
</div>
□ 行高的继承
示例：
body {
color: red;
font: 12px/1.5 'Microsoft YaHei';
}
div {
font-size: 14px;
}
p {
font-size: 16px;
}
<div>color是red，font-size为14px，line-height是21px</div> <p>color是red，font-size为16px，line-height是24px</p>
示例说明：
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前子元素的文字大小*1.5
body行高1.5的最大优势就是里面子元素可以根据自己文字大小自动调整行高
■ 优先级
当同一个元素指定多个选择器，就会有优先级的产生
选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
□ 优先级列表
继承或者*：0,0,0,0
元素选择器：0,0,0,1
类选择器，伪类选择器：0,0,1,0
ID选择器：0,1,0,0
行内样式 style="" ：1,0,0,0
!important 重要的 ：∞无穷大
□ 注意
权重是有4组数字组成，但是不会有进位
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
等级判断从左向右，如果某一位数值相同，则判断下一位数值
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0，如下示例：
#father {
color: red;
}
p {
color: pink;
}
a {
color: green;
}
<div id="father">
<p>
父标签div用的是id选择器，权重为0,1,0,0,
子标签p继承了父标签的样式,其权重总是0,0,0,0(不管父标签的权重多么大，即便是用了!important)
子标签用的是元素选择器，其权重是0,0,0,1
因此p标签执行元素选择器的样式，所以p标签的文字颜色是粉色
</p>
</div>
<a href="#">我是单独样式</a>
注：浏览器默认为超链接制定了一个样式，即 a {color: blue;}，因此超链接的样式需要单独指定
■ 权重叠加
复合选择器使用了多种选择器，因此需要通过权重叠加的方式计算权重
注意：权重可以叠加，但不会进位
□ 示例
ul { /* 权重= 0,0,0,1*/
color: red;
}
ul li { /* 权重= 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
color: green;
}
.nav li { /* 权重= 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
color: blue;
}
<ul>
<li>项目1，显示绿色</li>
<li>项目2，显示绿色</li>
<li>项目3，显示绿色</li>
</ul>
<ul class="nav">
<li>项目1，显示蓝色</li>
<li>项目2，显示蓝色</li>
<li>项目3，显示蓝色</li>
</ul>
一些权重计算的例子：
div ul li --> 0,0,0,3
.nav ul li --> 0,0,1,2
a:hover --> 0,0,1,1 (标签选择器 + 伪类选择器)
.nav a --> 0,0,1,1
标签：权重,color,标签,元素,特性,样式,三大,选择器,CSS 来源： https://www.cnblogs.com/shiliye/p/14187822.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。