CSS篇-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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞