css的三大特性讲解

最新推荐文章于 2024-07-19 23:42:48 发布

极具浪漫主义色彩的菜鸟学习之路

最新推荐文章于 2024-07-19 23:42:48 发布

阅读量299

点赞数

分类专栏：前端学习文章标签： html5 html 前端

本文链接：https://blog.csdn.net/muweichang/article/details/124411463

版权

前端学习专栏收录该内容

20 篇文章 2 订阅

订阅专栏

提示：来自哔哩哔哩博主知三冬

“人生本该自由，乘兴而去，尽兴而归”

css的三大特性

继承性
层叠性
优先级的介绍
- 权重叠加计算

css的三大特性，分别是继承性，层叠性，优先级

继承性

继承性是指被包在内部的，将拥有外部标签的特性，也就是说子元素可以继承父元素的属性

应该和Java的object一样，有继承关系的子类拥有父类的属性，同时也可以有自己独特属性

继承性的介绍
特性：子元素有默认继承父元素样式的特点（用成语来说，子承父业）
可以继承的常见属性：

文字控制属性都可以继承
在css中以text-,font-,line-开头的属性都是可以继承的
color
font-style,font-weight,font-size,font-family
text-indent,text-align
line-height
…

    <style>
        div{
            color: brown;
        }
    </style>
</head>
<body>
    <div>
        nihao
        <h1>nihao,</h1>
    </div>
    
</body>

在这里插入图片描述
注意：
继承失效的特殊情况：
如果元素有浏览器默认样式，此时继承性依然存在，但会失效

a标签的color会继承失效
h系列标签的font-size会继承失效

层叠性

特性：会有两种情况

给同一个标签设置不同的样式，此时样式会叠加，会共同作用在标签上
给同一一个标签设置相同的样式，此时样式会层叠覆盖，最终写在最后的样式会生效

注意点：

当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。这一点下一段会讲到

在这里插入图片描述
通过代码可以看出写在后面的会生效

    <style>
        div{
            background-color: aqua;
            background-color: black;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div></div>
    
</body>

优先级的介绍

优先级解决的问题：当一个标签使用了多个选择器，样式冲突的时候，到底谁生效
特性：在我们知道的选择器中，不同选择器具有不同优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

按照排列顺序有：

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

 - 标签选择器：div,p,span,...
 - id选择器：<div id="one"></div>  #one{样式}
 - 类选择器：<div class="box"></div>  .box{样式}
 - 通配符选择器：*{样式}
 - 行内样式：<h1 style="color: aqua;"></h1>

需要注意：

！important写在属性值的后面，分号的前面
！important不能提升继承的优先级
实际开发中，并不怎么用！important

    <style>
        body{
            color: burlywood;
        }
        h1{
            color: aqua;
        }
        .ceshi{
            color: brown ！important;
        }
        #ceshi{
            color:cornflowerblue
        }

        

    </style>

</head>
<body>
    <h1 class="ceshi" id="ceshi" style="color: green;">优先级</h1>
    
</body>

大家猜一下，优先级颜色是什么
在这里插入图片描述

权重叠加计算

如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算方式：注意在每一级之间不存在进位
在这里插入图片描述

规则:

先比较第一级数字,如果比较出来了,之后的统统不看
如果第一级数字相同，此时再去比较第二级数字
继续比较
如果最终所有数字都相同，表示优先级相同,则比较层叠性(谁写在下面,谁说了算!)
注意点: !important

    <style>
        div #three{
            color: greenyellow;
        }
        .one .two{
            color: blue;
        }
        .one h1{
            color: hotpink;
        }
        div p{
            color:pink;
        }

    </style>
</head>
<body>
    <div class="one">
        <h1 class="two" id="three">知道我是什么颜色吗</h1>
    </div>
    
</body>

由代码可以看出：在四个对颜色的样式中

0，1，0，1
0，0，2，0
0，0，1，1
0，0，0，2
可以得出样式一优先级最高，颜色为greenyellow

对于这篇学习笔记就暂时到这了，兄弟们加油❤️🤣😂😊😘💕😍😒
从现在做起，坚持下去，一天进步一小点，不久的将来，你会感谢曾经努力的你！
请添加图片描述

如果有出错的，请各位友友指正。

新人报到，各位友友们，给我个三联（点赞，关注，收藏）

极具浪漫主义色彩的菜鸟学习之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css的三大特性讲解

css的三大特性继承性层叠性优先级的介绍权重叠加计算css的三大特性，分别是继承性，层叠性，优先级继承性继承性是指被包在内部的，将拥有外部标签的特性，也就是说子元素可以继承父元素的属性应该和Java的object一样，有继承关系的子类拥有父类的属性，同时也可以有自己独特属性继承性的介绍特性：子元素有默认继承父元素样式的特点（用成语来说，子承父业）可以继承的常见属性：文字控制属性都可以继承在css中以text-,font-,line-开头的属性都是可
复制链接

扫一扫