为了账号安全,请及时绑定邮箱和手机立即绑定

CSS篇-CSS三大特性

标签:
Html/CSS

一 : 层叠性

浏览器处理冲突的一种能力,以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


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消