CSS进阶-18-CSS特性-继承性

最新推荐文章于 2025-04-12 00:03:23 发布

Keep learning（Poker）

最新推荐文章于 2025-04-12 00:03:23 发布

阅读量302

点赞数

文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/weixin_63562705/article/details/121841530

版权

本文介绍了CSS中的继承性，详细阐述了哪些文字控制属性可以被子元素继承，并通过实例展示了如何利用继承来设置样式。同时，也提到了一些继承失效的特殊情况，如a标签的color和h系列标签的font-size在浏览器默认样式下的表现。了解这些细节有助于更精确地控制网页样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四、CSS特性

1.1继承性的介绍

★特性:子元素有默认继承父元素样式的特点(子承父业)

★可以继承的常见属性(文字控制属性都可以继承)

1. color

2. font-style、font-weight、 font-size、font-family

3. text-indent.、text-align

4. line-height

5. ......

★注意点:

·可以通过调试工具判断样式是否可以继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 控制文字的属性都能继承；不是控制文字的都不能继承 */
        div{
            color: red;
            font-size: 30px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        这是div标签里面的文字
        <span>这是div里面的span</span>
    </div>
</body>
</html>

(拓展)继承失效的特殊情况

如果元素有浏览器默认样式，此时继承性依然存在，但是也有特殊情况：

1. a标签的color会继承失效

2. h系列标签的font-size会继承失效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: red;
            font-size: 12px;
        }

        a{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">超链接</a>
        <h1>一级标题</h1>
    </div>
</body>
</html>