CSS三大特性

最新推荐文章于 2022-07-20 19:34:12 发布

caoPengFlying

最新推荐文章于 2022-07-20 19:34:12 发布

阅读量6.5k

点赞数

分类专栏： html/css 文章标签： css 三大特性继承性层叠性优先性

本文链接：https://blog.csdn.net/caoPengFlying/article/details/75304029

版权

html/css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

继承性

样式具有继承性，一般有关text- line- font-都能够继承。 a标签的颜色不能继承

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>继承</title>
    <style type="text/css">
        #div1{
            font-size: 34px;
            color: red;
            border: 1px solid yellow;
        }/*字体和颜色被继承伪类但是边框没有*/
    </style>
</head>
<body>
    <div id="div1">
        这是div1中的内容
        <div id="div22">
            这是div2中的内容
        </div>
    </div>
</body>
</html>

层叠性

浏览器处理冲突的能力，如果两个样式对同一个标签施加不同的样式，那么两个样式都起作用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>层叠性</title>
    <style type="text/css">
        div{
            font-size: 24px;

        }
        #div1{
            color: red;
        }
    </style>
</head>
<body>
    <div id="div1">
        这是div1中的内容
    </div>
    <div >
        这是div2中的内容
    </div>
</body>
</html>

如果两个选择器对元素施加同样的样式那么显示优先级更高的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>层叠性</title>
    <style type="text/css">
        div{
            color: blue;

        }
        #div1{
            color: red;
        }
    </style>
</head>
<body>
    <div id="div1">
        这是div1中的内容
    </div>
    <div >
        这是div2中的内容
    </div>
</body>
</html>

优先级

!important > 内联样式 > i选择器 > 类选择器>标签选择器 >通配符>继承
权重计算算法：(0,0,0,0) 分别为important的个数，id选择器的个数, 类选择器的个数, 标签选择器的个数

caoPengFlying

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS三大特性

继承性样式具有继承性，一般有关text- line- font-都能够继承。 a标签的颜色不能继承 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Co
复制链接

扫一扫