CSS的继承性与层叠性

最新推荐文章于 2023-04-12 15:28:43 发布
最新推荐文章于 2023-04-12 15:28:43 发布
阅读量203 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014042372/article/details/80221666
版权

css的继承性与层叠性参考一下两个demo即可

1. 

<!DOCTYPE html>
<html lang="en">
<!--css3选择器-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*1. 继承性*/
        /*有一些属性，当给自己设置的时候，自己的后代都继承上了，即css的继承性*/
        /*color, text-开头的, line-开头的, font-开头的 这些关于文字样式的都能继承；
        所有关于盒子的、定位的、布局的属性都不能继承*/
        body{
            color: red;font-size: 20px;
        }

        /*2. 层叠性 权重的衡量(id class 标签)不进位，如果权重一样，以写在后面的为准*/
        /*id选择器 1  class选择器 1  标签选择器 1   记作 1 1 1；
        开始数之前一定要看一下是否选中文字所在的内层标签*/
        #box1 .hezi2 p{
            color: red;
        }

        /*1,0,3*/
        div div #box3 p{
            color: green;
        }

        /*0,3,4 交集选择器是一个标签选择器和一个类选择器*/
        div.hezi1 div.hezi2 div.hezi3 p{
            color: blue;
        }
    </style>
</head>
<body>
    <!--1. 继承性-->
    <div>
        <ul>
            <li>
                <p>我的颜色</p>
            </li>
        </ul>
        <p>我的颜色</p>
    </div>

    <div>
        <ul>
            <li>郑州</li>
            <li>郑州</li>
            <li>郑州</li>
        </ul>
    </div>

    <!--2. 层叠性-->
    <div class="hezi1" id="box1">
        <div class="hezi2" id="box2">
            <div class="hezi3" id="box3">
                <p>我的颜色</p>
            </div>
        </div>
    </div>
</body>
</html>

2. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*如果没有直接选中，通过继承性得来的权重为0；
        如果都是0，就近原则*/
        #box{
            color: red;
        }
        p{
            color: blue;
        }

        /*都没选中，就近原则*/
        .hezi1 .hezi2{
            color: red;
        }
        .hezi3{
            color: blue;
        }

    </style>
</head>
<body>
    <div id="box">
        <p>哈哈哈哈</p>
    </div>


    <div class="hezi1" id="box1">
        <div class="hezi2" id="box2">
            <div class="hezi3" id="box3">
                <p>我的颜色</p>
            </div>
        </div>
    </div>

</body>
</html>

3. 典型例题

<!DOCTYPE html>
<html lang="en">
<!--css3选择器-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        /*两个都选中了，表示box1的后代div都被选中了*/
        #box1 div{
            color: red;
        }
        #box3{
            color: blue;
        }

    </style>
</head>
<body>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                我的颜色
            </div>
        </div>
    </div>
</body>
</html>

4. important属性

<!DOCTYPE html>
<html lang="en">
<!--css3选择器-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        /*!important提升的是一个属性而不是一个选择器，无法提升继承的权重；*/
        p{
            color: red;
            font-size: 50px !important;
        }
        #para1{
            color: blue;
        }
        .c1{
            color: green !important;
        }


        /*都没有选中时不影响就近原则*/
        ul{
            color: red !important;
        }
        h3{
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p id="para1" class="c1">我的颜色</p>
    </div>

    <div>
        <ul>
            <li>
                <h3>哈哈哈哈</h3>
            </li>
        </ul>
    </div>
</body>
</html>

 

star9595
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS之权重和继承
qq_53977993的博客
10-14 248
本章是对CSS选择器的一个补充，主要介绍了选择器的权重和一些样式的继承问题，也算是一个承上启下的章节。
CSS-优先级与继承
Pluto_lei的博客
10-05 377
CSS(cascade style sheet)层叠样式表 一个元素的最终样式是由多个来源叠加后的结果 一、样式来源 使用不同的选择器设置的样式 浏览器默认样式 (user agent stylesheet) 继承的样式 (Inherited from xxx) 二、优先级顺序 !important > 内联样式(标签上得style上的属性) > 选择器设置样式 （css文件，style标签）> 浏览器默认样式 > 继承样式 2.1、!important <div clas
【自学CSS笔记】CSS的三大特性——层叠性，继承性与优先级
qq_51843898的博客
01-12 766
CSS有三大非常重要的特性：层叠性，继承性与优先级。以下便是对CSS三大特性的整理，这三大特性中，层叠性解决了CSS选择器相同时样式冲突的问题，继承性使得在指定整体CSS样式的时候代码更加简洁，优先级解决了不同选择器指定同一个元素的样式冲突问题。它们三者共同规范了CSS样式的指定规则，十分重要。
CSS 继承性与层叠性
timmtiy的博客
04-12 131
行内式： 行内样式与内嵌或外链式比较权重最高，但是与!important关键字相比较权重低。important不能提升选择器权重，只能提升某条属性的权重到最大。就近原则中，不需要比较选择器权重，所有important会失效。
CSS继承性和层叠性
qq_53632966的博客
12-06 538
CSS继承性和层叠性
CSS的继承性和层叠式
一杯清泉
06-11 721
color、text-开头的、line-开头的，font-开头的这些关于文字样式的，都可以继承；所有的盒子的、定位的、布局属性都不能继承。多个选择器同时作用在同一个元素上时候，看权重，那个高，最后显示那个，优先级从高到低分别是：先比较ID选择器数量，在比较类选择器数量，最后比较标签选择器数量最后显示的绿色，因为ID选择器数量优先级高，所以以2为准了，如果都一样，谁写在后面，谁的生效。如果不能直接选中某个元素权重是0，如通过继承而来的权重是0，开始数权重之前一定要看看是不是真的选中文字所在的最内层的标签，没选
【CSS】CSS中继承性与层叠性
致力于成为顶尖的架构师
02-02 1288
上篇介绍了CSS里面的选择器，接下来我们了解CSS中两大特性，继承性和层叠性 继承性 概念： 所谓继承，就是父元素的规则也会适用于子元素。比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色。 首先我们先来了解DOM（文档对象模型）树，   当使用css对一个设置后，这样的设置会对该元素产生作用，一级他的子元素产生作用，比如
浅谈CSS中的继承性,特殊性,层叠性和重要性
09-24
下面小编就为大家带来一篇浅谈CSS中的继承性,特殊性,层叠性和重要性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS特殊性、继承与层叠
09-27
CSS特殊性、继承和层叠是CSS样式应用的关键原则，它们决定了哪些样式会最终应用到网页元素上。首先，我们来详细了解一下这三个概念。 **特殊性（Specificity）**是CSS中决定样式优先级的一个机制。它根据选择器的...
CSS样式继承和层叠
09-24
CSS样式继承和层叠是CSS（层叠样式表）中两个关键的概念，它们共同决定了页面元素的最终显示效果。理解这两个概念对于优化网页设计和维护至关重要。 **样式继承** 样式继承是指当一个父元素设置了某些样式后，这些...
CSS的继承性和层叠性
qq_42646178的博客
08-04 168
1.继承性 HTML后代的元素会继承父类元素设置的样式。比如下图，给一个div设置颜色的样式为红色，其后代元素p元素的颜色也变了，这就是继承性。 但是并不是所有的样式都能继承，规则如下： 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。 关于盒子、定位、布局的属性，都不能继承。 2.层叠性 计算权重，用于决定使用哪个定义的样式。所有的权重计算，没有任何兼容问题！如下图权重低的样式将会被高的样式所覆盖。 计算权重 ...
CSS样式----CSS样式表的继承性和层叠性（图文详解）
weixin_34062329的博客
07-29 378
本文最初于2017-07-29发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。 以下是正文。 本文重点 CSS的继承性 CSS的层叠性 计算权重 权重问题大总结 CSS样式表的冲突的总结 权重问题深入 同一个标签，携带了多个类名 !important标记 CSS的继承性 我们来看下面这样的代码，来引入继承性： 上方代码中...
CSS层叠性，继承性
weixin_45938584的博客
07-07 841
css特性 层叠性：层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另一个属性。 层叠性主要遵循的原则就是就近原则，在不考虑优先级的情况下，在多个样式中最终生效额样式是离标签最近的样式。 继承性：继承性是指当标签没有设置样式时，会继承父标签的样式，比如一个标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。 可继承的属性比如由字体属性（字体颜色，字体大小之类的），文本属性，行高之类，背景类属性（背景颜色之类的） 优先级 !important 作用是提高指定css样式规则的应用的优先级。
CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)
weixin_30954607的博客
07-31 256
CSS3基础——笔记 　　CSS是Cascading Style Sheet的缩写，翻译为"层叠样式表"或 "级联样式表"。CSS定义如何显示HTML的标签央视，用于设计网页的外观效果。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。 一、CSS基础用法 　　CSS代码可以在任何文本编辑器中打开和编辑。因此，不管读者有没有变成基础，初次接触CSS时会感到很简单。 1.1...
CSS的继承性、层叠性、特殊性
qq_29910567的博客
10-21 195
本节重点 1.继承性 在css中某些样式是具有继承性的，那么什么是继承呢？官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。 如你父亲是双眼皮，你母亲是单眼皮，那么你是双眼皮，那么你就是继承了父亲的双眼皮。 拿到我们实际的代码中应用，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g..
CSS三大特性(层叠性、继承性、优先级）
qq_52301431的博客
03-27 1639
目录 （1）CSS层叠性 （2）CSS继承性 （3）CSS优先级 什么是优先级？ 优先级判断 优先级之!important 优先级权重 （4)总结： （1）CSS层叠性 是浏览器处理冲突的一个能力。如果一个css属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉（覆盖） 覆盖原则：先看权重，高者去覆盖。权重一样就遵守就近原则，后来者居上。 （2）CSS继承性 作用：子元素可以继承父元素的样式。 特殊性： 并不是所有的属性都可以继承,
[CSS]CSS的继承性、层叠性、权重
Feathers的个人笔记
12-13 4578
CSS像艺术家一样优雅，像工程师一样严谨继承性CSS样式具有继承性，所谓的继承性，就是给某些元素设置样式时，后代元素也会自动继承父类的样式。这叫CSS的继承性。比如 color属性设置字体颜色，后代自动继承。CSS的继承特性，一定程度上简化了代码的操作，至少方便了我这类懒癌患者。<!DOCTYPE html> <html> <head> <title>test</title> <me
css层叠性和css继承性
最新发布
04-09
CSS层叠性（Cascading）和CSS继承性（Inheritance）是CSS的两个重要特性。 1. CSS层叠性： CSS层叠性指的是当多个CSS规则应用于同一个元素时，通过一定的规则来确定最终应用的样式。具体来说，CSS样式表中的规则...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值