前端一HTML:十三:css的三大特性

最新推荐文章于 2021-08-09 23:36:17 发布

请叫我大虾

最新推荐文章于 2021-08-09 23:36:17 发布

阅读量248

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_37564426/article/details/88703330

版权

前端专栏收录该内容

41 篇文章 1 订阅

订阅专栏

1. 继承

给父元素设置一个属性，然后子元素可以使用.

凡是以 line-,text-,font-开头的属性都是可以继承。

2. 层叠

是页面处理冲突属性的一个能力

如果两个选择器为同一个元素设置了不同的属性，它们会同时作用于这个元素。

如果两个选择器为同一个元素设置了相同的属性，它们会发生层叠。(层叠的结果跟优先级有关系)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .one{
            font-style: italic;
            color:blue;
        }
        div{
            font-size: 30px;
            color:red;
        }
    </style>
</head>
<body>
    <div class="one" id="one">
        abc
    </div>
</body>
</html>

3. 优先级

优先级从大到小排列: !important属性 > id选择器 > 类选择器 > 标签选择器>通配符>继承>浏览器默认

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #one{
            color: pink;
        }

        .one{
            font-style: italic;
            color:blue;
        }
        div{
            font-size: 30px;
            color:red;
        }

        .father {
            color: yellow;
        }

        * {
            color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="one" id="one">
            abc
        </div>
    </div>
</body>
</html>