七、CSS 三大特性（完整详细解析）

CSS 三大特性（完整详细解析）

1.优先级：
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

选择器相同，则执行层叠性
选择器不同，就会出现优先级的问题。

1）权重计算公式
a.简单记忆法：通配符和继承权重为0
标签选择器权重为1
类（伪类）选择器为10
id 选择器权重为100
行内样式表权重为 1000
!important 权重为无穷大

2）权重叠加
我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算

div ul li ------> 0,0,0,1 + 0,0,0,1 + 0,0,0,1 = 0,0,0,3
.nav ul li ------> 0,0,1,0 + 0,0,0,1 + 0,0,0,1 = 0,0,1,2
a:hover -----—> 0,0,0,1 + 0,0,1,0 = 0,0,1,1
.nav a ------> 0,0,1,0 + 0,0,0,1 = 0,0,1,1

注意：

数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在 10个div能赶上一个类选择器的情况。

3）. 继承的权重为0，不管父元素权重多高，子元素得到的权重都是0
这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。

1）如果选中了，那么以上面的公式来计权重，谁大听谁的。
2）如果没有选中，那么权重是0，因为继承的权重为0.

2.CSS层叠性

概念：
所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

原则：
样式冲突，遵循的原则是就近原则。哪个样式离结构近，就执行哪个样式。
样式不冲突，则不会层叠

CSS层叠性的执行口诀：长江后浪推前浪，前浪死在沙滩上。

3.CSS继承性

概念：
子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。简单的理解就是：子承父业。

注意：
恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
子元素可以继承父元素的样式有（text-，font-，line-这些元素开头的可以继承，以及color属性）

CSS继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞。

七、CSS 三大特性（完整详细解析）相关推荐

0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...
前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性
css样式表/层叠样式表(2) (1)css复合选择器后代选择器子元素选择器交集选择器(不常用) 并集选择器链接伪类选择器 (2)标签的显示模式块级元素block-level 行内元素inl ...
css --- [学习笔记]背景图片小结 css三大特性
源代码参考 1. 行高(line-height) 目标理解 - 能说出行高和高度三种关系 - 能简单理解为什么行高等于单行文字会垂直居应用使用行高实现单行文字垂直居中能会测量行高 2. CS ...
从零开始学前端：CSS元素模式的转换和CSS三大特性 --- 今天你学习了吗？（CSS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:复习课程 - 今天你学习了吗?(CSS:Day11) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
CSS三大特性的利用注意事项
CSS的三大特性目录 CSS的三大特性一.CSS层叠性二.CSS继承性三.CSS优先级总结下面我会依次阐述这三种特性使用时的注意事项与方法. 一.CSS层叠性在对一个元素所设置的多个不同 ...
day 9/16 css三大特性和盒子模型
CSS 三大特性层叠性继承性特殊性 CSS层叠性所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另 ...
【精选】一文搞懂css三大特性
文章目录前言一.css的三大特性都有什么? 二.盒子模型 1.盒子属性 ①盒子边框border ②盒子边角border-radius ③盒子阴影 box-shadow 2.内边距padding 3 ...
CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
CSS笔记二-选择器、背景相关属性、元素显示模式、CSS三大特性、chrome调试工具、PXcook使用
一.复合选择器 1.后代选择器根据HTML标签的嵌套关系,选择父元素后代中满足条件的子元素: 选择器语法:选择器1 选择器2 {css} 结果:在选择器1中所找到标签的后代(儿子.孙子.重孙子... ...

七、CSS 三大特性（完整详细解析）

CSS 三大特性（完整详细解析）

七、CSS 三大特性（完整详细解析）相关推荐

最新文章

热门文章