01-CSS的三大特性（层叠性、继承性、优先级）

大家努力卡机啊

已于 2022-03-29 11:49:32 修改

阅读量259

点赞数

分类专栏：入门css 文章标签： html css

于 2022-03-29 11:46:33 首次发布

本文链接：https://blog.csdn.net/iiopy/article/details/123791306

版权

入门css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

层叠性

相同选择器给设置相同的样式，此时的一个样式会覆盖（层叠）另一个冲突的样式。

原则：

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

如下示例：

    <style>
        div {
            color: red;
            font-size:12px;
        }
        div {
            color: pink;
        }
    </style>

<body>
    <div>
        我用了谁的样式呢？
    </div>
</body>

得到的样式是12px的粉色字体。

继承性

子标签会继承父标签的某些样式，如文本颜色和字号。

恰当使用继承可简化代码，降低CSS样式的复杂性。
子元素可继承父元素的（text- ，font- ，line- 这些元素开头的样式，以及color属性）。

如下示例：

<head>
    <style>
        div {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div>
        <p>龙生龙，凤生风，老鼠生的孩子会打洞</p>
    </div>
</body>

虽然p没有设置样式，但是会继承div的样式。所以得到的是12px的红色字体。

- 行高的继承

        body {
        /* font: 12px/24px 'Microsoft YaHei';*/
           font: 12px/1.5 'Microsoft YaHei'; /*这个的行高为12*1.5*/
        }

行高可以跟单位（如25px）也可以不跟单位（不跟单位是倍数形式）。
继承就是如果子元素没有设置行高，则会继承父元素的行高。
（倍数形式）此时子元素的行高是：当前子元素文字大小*倍数。

优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性。
选择器不同，则根据选择器权重执行。

选择器	选择器权重
继承或 *	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 style=""	1，0，0，0
!important 重要的	无穷大

由上至下，选择器权重逐级增大

演示： （从元素选择器开始，最后一个才演示继承）

很明显，只有元素选择器的时候，字体是粉色的。

<style>
     div{ color: pink ; }
</style>

<body>
    <div>GOOD </div>
</body>

请添加图片描述

当有类选择器时，类选择器会覆盖元素选择器，字体变成红色。

<style>
     div{ color: pink ; }
    .test { color: red; } 
</style>

<body>
    <div class="test">GOOD </div>
</body>

请添加图片描述

当有ID选择器，ID选择器又会覆盖类选择器，字体变成绿色。

<style>
     div{ color: pink ; }
    .test { color: red; } 
    #demo {color:green; }
</style>

<body>
    <div class="test" id="demo">GOOD </div>
</body>

在这里插入图片描述

当有行内样式时，行内样式又会覆盖ID选择器，字体变成紫色。

<style>
     div{ color: pink ; }
    .test { color: red; } 
    #demo {color:green; }
</style>

<body>
    <div class="test" id="demo style="color: purple;">GOOD </div>
</body>

在这里插入图片描述

在级别很低的元素选择器后加了==!important==后，就变成老大了，是最高级的！此时字体是粉红色。

<style>
     div{ color: pink !important ;  }
    .test { color: red; } 
    #demo {color:green; }
</style>

<body>
    <div class="test" id="demo style="color: purple;">GOOD </div>
</body>

在这里插入图片描述

继承：虽然父亲的权重很厉害，但是继承过来权重就会变成0，所以还是比不上元素选择器。所以，p的字体变为蓝色。

<style>
     #father { color: red !important; }
       p { color: skyblue; }
</style>

<body>
    <div id="demo">
        <p>GOOD</p>
    </div>
</body>

在这里插入图片描述

特殊例子

a链接在浏览器中默认指定了一个样式“蓝色的有下划线” （元素选择器） ,因为自身的权重比继承的权重大，故无法通过继承修改样式。

<style>
     body { color: red; }
</style>

<body>
  <a href="#">我很独特</a>
</body>

在这里插入图片描述

权重叠加

权重要从左往右一个位一个位的比较

如果是复合选择器，则会有权重叠加，需要计算权重。虽然权重有叠加，但是永远不会有进位。

  <style>
        /* ul li 的li权重是0，0，0，1 + 0，0，0，1 = 0，0，0，2 */
        ul li { color: green; }
        /* li 的权重是0，0，0，1*/
        li {  color: red; }
  </style>

<body>
    <ul>
        <li>西瓜</li>
        <li>火龙果</li>
        <li>哈密瓜</li>
    </ul>
</body>

在这里插入图片描述
简单计算

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

大家努力卡机啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01-CSS的三大特性（层叠性、继承性、优先级）

CSS的三大特性：层叠性、继承性、优先级层叠性相同选择器给设置相同的样式，此时的一个样式会覆盖（层叠）另一个冲突的样式。原则：样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式。样式不冲突，不会层叠。如下示例：<head> <style> div { color: red; font-size:12px; } div { color:
复制链接

扫一扫