CSS三大特性

最新推荐文章于 2022-05-20 16:22:06 发布

pick豆子

最新推荐文章于 2022-05-20 16:22:06 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/qq_42964711/article/details/105889535

版权

层叠性：

最后为粉色：就近原则或者覆盖了红色。

    div {
        color: red;
    }
    div {
        pink: pink;
    }

继承性

p继承div的属性
儿子继承父子继承的属性
可以把body选择为一个颜色。
但也只是继承一部分特点：只有关于文字关系的可以继承。

    <style>
        div {
            color: pink;
        }
    </style>
    <div>
        <p>2</p>
    </div>

行高的继承

让子元素font-size行高为1.5倍
如子类font-size ：12px 则子类为12乘1.5

   //父类
   font: 12px/1.5

优先性

div选择.d还是div

答案：选择red色因为类选择器大于元素选择器
id选择器永远大于类选择器
id（#开头）>类>元素选择器

    <style>
        div {
            color: pink;
        }
        .d {
           color: red;
        }
    </style>
</head>
<body>
    <div class="d"></div>
</body>

红还是粉

最后为红色
尽管id选择器大于元素选择器
首先p继承了父类div后权重降为0
所以元素选择大于id选择器，最后为red（类选择器）
注：看什么颜色看是不是直接被选择颜色，而不是继承来的颜色。

    <style>
        #father {
            color: pink;
        }
        p {
           color: red;
        }
    </style>
</head>
<body>
    <div id="father">
        <p>hhh</p>
    </div>
</body>

超链接类选择器设置颜色为blue色所以当让boby变颜色时，a herf颜色不变，还是蓝色。
因为a继承了boby权重为0，还是遵从自己的蓝颜色。

复合选择器权重相加让后比较
如俩个类选择器0，0，0，1相加变为0，0，0，2
但不会进位。
4组一个单位，不会进位。

:hover伪类选择器为10
div ul li= 0 0 0 3
.nav ul li=0 0 1 2
a:hover=0 0 1 1
.nav a=0 0 1 1

pick豆子

关注

0
点赞
踩
0

收藏

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

层叠性：最后为粉色：就近原则或者覆盖了红色。 div { color: red; } div { pink: pink; }继承性p继承div的属性儿子继承父子继承的属性可以把body选择为一个颜色。但也只是继承一部分特点：只有关于文字关系的可以继承。 <style> div { ...
复制链接

扫一扫