一 : 层叠性
浏览器处理冲突的一种能力,以CSS的书写顺序,以下面的样式为准.
类似英语的就近原则
总结一 : 样式冲突遵循就近原则,哪个样式离着结构近,就执行哪个样式
但字体不会被覆盖还是25px
总结二 : 样式不冲突,不会层叠
示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: red; font-size: 25px; } div { color: pink; } </style> </head> <body> <!-- css 层叠样式表 --> <div>ZK是狗</div> </body> </html>二 : 继承性
所谓继承性是指书写CSS样式表时,子标签会集成父标签的某些样式,如文本颜色和字号,想要设置一个可继承的属性,只需将它应用于父元素即可.
但是并不是所有都继承,高度,宽度不会继承,只是与文本相关的.恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
示例代码
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*p { color: red; }*/ .jianlin { color: pink; font-size: 50px; height: 100px; } </style> </head> <body> <div class="jianlin"> <p>王思聪</p> </div> </body> </html>三 : 优先级
CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：
| 继承或者* 的贡献值 | 0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 重要的 | ∞ 无穷大 |
示例代码
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #ya { /*权重 0,1,0,0*/ color: blue; } .yase { /* 类选择器权重 高于 标签选择器 权重 0, 0, 1, 0*/ color: green; } div { /* 权重 0, 0, 0, 1*/ /* 权重 0, 0, 0, 1*/ color: red; } div { /* 权重 0, 0, 0, 1*/ /* 权重 0, 0, 0, 1*/ color: hotpink!important; } * { 0 0 0 0 } /** 0000 div 0001 .one 0010 #two 0100 行内 1000 important ∞*/ </style> </head> <body> <div class="yase" id="ya" style="color: orange">世界杯加油!</div> </body> </html>原则一 : 权重相同 则就近原则
示例代码
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { /*0001*/ color: red; } div { /*0001*/ color: green; } </style> </head> <body> <div> <p > 世界杯cool </p> </div> </body> </html>原则二 : 权重会叠加
示例代码
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div p {/* 0001 + 0001 = 0002*/ color: green; } p { /*0001*/ color: red; } .feng { /* 0010*/ color: blue; } </style> </head> <body> <div> <p class="feng"> 世界杯Cool </p> </div> </body> </html>标签权重叠加示例
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 #nav p -----> 0,1,0,1
总结 : 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
继承问题
继承的权重为0
优先执行自己的
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p { color: red; } div { color: pink; } </style> </head> <body> <div > <p>继承的问题</p> </div> </body> </html>下面这种情况还是执行自己的
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { /* 0010*/ color: green!important; } p { /*0001*/ color: red; } </style> </head> <body> <div class="father"> <p>继承的问题</p> </div> </body> </html>
作者：TianTianBaby223
链接：https://www.jianshu.com/p/7600e4e879d2
随时随地看视频
