CSS三大特性(层叠/继承/优先)

(1)CSS层叠性

层叠性指多种CSS样式的叠加。这是浏览器处理冲突的一个能力。

当出现样式冲突，会按照CSS书写的顺序，以最后的样式为准：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>div {color: skyblue;font-style: 30px;}div {color: hotpink;}</style>
</head><body><div>月读当空照,斑爷对我笑。</div>
</body></html>

(2)CSS继承性

继承性是指在写CSS样式表时，子标签会继承父标签的某些样式。

恰当地使用继承可以简化代码，降低CSS样式的复杂性。
子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,一级color属性)。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>div {color: pink;font-size: 30px;}</style>
</head><body><div><p>胜利女神在微笑</p></div>
</body></html>

(3)CSS优先级/CSS特殊性(specificity)

CSS优先级是为了解决CSS层叠性的一些问题。
使用CSS specificity计算CSS权重：

继承/*贡献值------0.0.0.0;
标签贡献值------0,0,0,1;
类/伪类贡献值------0.0.1,0;
ID贡献值-----0,1,0,0;
行内样式贡献值------1,0,0,0;
!important贡献值------∞无穷大

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>/* 最大的 div {color: orange !important;} *//* id选择器    0,0,1,0 */#ning {color: red;}/* 类选择器    0,0,1,0 */.king {color: blue;}/* 伪类选择器  0,0,1,0 */:first-child {color: green;}/* 标签选择器  0,0,0,1 */div {color: pink;}</style>
</head><body><div><p class="king" id="ning" style="color:skyblue">得来失 聚了散 千万莫求全</p></div>
</body></html>

权重叠加的例子:
div ul li ------ 0,0,0,2;
.nav ul li ------ 0,0,1,2;
a:hover ------ 0,0,1,1;
.nav a ------ 0,0,1,1;
#nav p ------ 0,1,0,1;
同一类选择器遵循就近原则
优先级总结:
权重是优先级的算法,层叠是优先级的表现。

CSS三大特性(层叠/继承/优先)相关推荐

web前端学习128-134（CSS三大特性---层叠性，继承性，优先级）
文章目录 1 CSS的三大特性 1.1 层叠性 1.2 继承性 1.3 优先级 1 CSS的三大特性 CSS有三个非常重要的三个特性︰层叠性.继承性.优先级. 1.1 层叠性相同选择器给设置相同的样 ...
day 9/16 css三大特性和盒子模型
CSS 三大特性层叠性继承性特殊性 CSS层叠性所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另 ...
【前端基础之css2(emmet语法、CSS复合选择器、元素的显示模式、Snipaste截图工具、小米侧边栏制作、CSS背景、CSS三大特性、盒子模型、PS基本操作】
emmet语法快速生成HTML标签: 快速生成CSS样式语法: 方法1(没有找到对应的文件,所以用了方法2): 方法2: 左下角选择设置搜索框输入"格式化",勾选上如图三个选项 ...
CSS3day(CSS三大特性，行高的继承，选择器的权重，盒子模型：外边距，边框，内边距)
文章目录 CSS三大特性:层叠性.继承性.优先级层叠性继承性行高的继承优先级优先级权重的叠加盒子模型: 边框(border) 表格的细线边框边框会影响盒子的实际大小内边距(paddin ...
CSS三大特性的利用注意事项
CSS的三大特性目录 CSS的三大特性一.CSS层叠性二.CSS继承性三.CSS优先级总结下面我会依次阐述这三种特性使用时的注意事项与方法. 一.CSS层叠性在对一个元素所设置的多个不同 ...
CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
CSS笔记二-选择器、背景相关属性、元素显示模式、CSS三大特性、chrome调试工具、PXcook使用
一.复合选择器 1.后代选择器根据HTML标签的嵌套关系,选择父元素后代中满足条件的子元素: 选择器语法:选择器1 选择器2 {css} 结果:在选择器1中所找到标签的后代(儿子.孙子.重孙子... ...
CSS 三大特性与盒子模型
CSS 三大特性 CSS层叠性 css=层叠样式表所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个 ...
CSS三大特性，初识盒子
CSS三大特性,初识盒子 CSS层叠性层叠性就是CSS处理冲突的一种能力. 层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生 ...
前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性
css样式表/层叠样式表(2) (1)css复合选择器后代选择器子元素选择器交集选择器(不常用) 并集选择器链接伪类选择器 (2)标签的显示模式块级元素block-level 行内元素inl ...

CSS三大特性(层叠/继承/优先)

(1)CSS层叠性

(2)CSS继承性

(3)CSS优先级/CSS特殊性(specificity)

CSS三大特性(层叠/继承/优先)相关推荐

最新文章

热门文章