【CSS】2.简单理解CSS三大特性

0.前言

  往期文章CSS引入方式及选择器分类。CSS三大特性,即层叠,继承,优先级。


1.层叠

  等级相同的选择器针对某一或某些属性的样式产生冲突,那么后声明的选择器在这些属性上设置的样式将覆盖先声明的选择器,而未产生冲突的属性不受影响。
  至于怎样才算等级相同,可进一步查看后面的优先级,下面给出例子的选择器的等级是相同的,放心查看。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>层叠</title>

    <style>
        .box1{
    
            color: black;
            background-color:palegreen;
        }

        .box2{
    
            color: red;
        }
    </style>
</head>
<body>
             <div class="box1 box2">太阳当空照</div>
            
</body>
</html>

效果
在这里插入图片描述



2.继承

  子元素可以继承父元素的属性,这些属性通常是与文字相关的,通常是以text-,font-,line-开头的属性和color属性;而有些属性是不可继承的,比如margin,padding,display,border,background-color这类与盒子模型相关的属性是不能继承的。具体属性能不能够继承,可以查看 官方文档

案例

在这里插入图片描述

  下面是关于继承稍微更近一层的知识,比如如果子元素不想继承父类元素的样式,但是又想保持原有样式该如何处理呢?这一部分可以跳过,直接看优先级


每一个属性都可以设置如下属性值。

属性值 作用
inherit 如果属性能够被继承,那么将继承父类的属性值
如果不能够被继承,此属性值设置无效。
initial 保持该属性的默认值。
unset 如果属性能够被继承,那么unset等价于inherit;
如果属性不能够被继承,那么unset等价于initial。

下面的两个例子是基于color属性能够被继承,display属性不能够被继承来设置的。

Demo1(基于color能够被继承)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title></
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值