CSS - 继承特性

最新推荐文章于 2022-07-21 16:24:22 发布

weixin_33701617

最新推荐文章于 2022-07-21 16:24:22 发布

阅读量152

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/johnvwan/p/9574607.html

CSS的继承简单的说就是将各个HTML标记看做一个个容器，其中被包含的小容器会继承包含它的大容器的风格样式。下面从页面各个标记的父子关系出发，来聊聊CSS的继承。

一. CSS的继承

为了更好地理解继承关系，首先从HTML文件的组织结构入手，如下例所示。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承关系</title>
</head>
<body>
    <h1><em>CSS</em>继承</h1>
    <p>CSS的继承理解。</p>
    <ul>
        <li>CSS水平测试:
            <ul>
                <li>HTML</li>
                <li>CSS
                    <ul>
                        <li>CSS初级</li>
                        <li>CSS中级</li>
                        <li>CSS高级</li>                        
                    </ul>                    
                </li>
                <li>Javascript</li>
            </ul>
        </li>
        <li>还有些其他技能
            <ol>
                <li>Dreamweaver</li>
                <li>Photoshop</li>
            </ol>
        </li>
    </ul>
    <p>好好学习前端技能</p>
</body>
</html>

页面效果如下。

这里着重从“继承”的角度来考虑各个标记之间的“树”型关系，如下图所示。在这个树型关系中，处于最上端的<html>标记称之为“根（root）”，它是所有标记的源头，往下层层包含。在每一个分支中，称上层标记为其下层标记的“父”标记；相应地，下层标记成为上层标记的“子”标记。

二. CSS继承的运用

CSS继承指的是子标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。在前面示例代码中加入如下CSS代码。

<style>
    h1{
        color: blue;
        text-decoration: underline;
    }
    em{
        color: red;
    }
</style>

显示效果如下所示，可以看到其子标记em也显示出下划线，说明对父标记的设置也对子标记产生效果，而em文字显示为红色，h1标题中其他文字仍为蓝色，说明对子标记的设置不会对其父标记产生作用。

CSS的继承贯穿整个CSS设计的始终，每个标记都遵循着CSS继承的概念。可以利用这种巧妙的继承关系，大大缩减代码量，并提高可读性，尤其是页面内容很多且关系复杂的情况下。例如，现在要嵌套最深的第3级列表的文字显示为绿色，那么增加如下样式设置：

li{
        color: green;
        font-weight: bold;
    }

效果将如图所示，所有列表项目的文字都变成了绿色。要仅使“CSS”项下的最深的3个项目显示为绿色，其他项目仍显示为黑色，该怎么设置呢？

一种方法是设置单独的类别，比如定义一个“.green”类别，然后将该类别赋予需要变为绿色的项目，但是这样设置显然很麻烦。可以利用继承的特性，使用后代选择器，这样不需要设置新的类别即可完成同样的任务。

ul li ul li ul li{
        color: green;
        font-weight: bold;
    }

效果如下图。

实际上，对上面的选择器，还可以化简，如下所示。

li li li{
        color: green;
        font-weight: bold;
    }

好了，本篇文章就介绍到这儿，欢迎大家留言交流；喜欢或有帮助到您的话，点个赞或推荐支持一下！

转载于:https://www.cnblogs.com/johnvwan/p/9574607.html