初入WEB前端（13）CSS样式的权重、颜色

最新推荐文章于 2021-08-27 22:08:05 发布

宋辰轩

最新推荐文章于 2021-08-27 22:08:05 发布

阅读量418

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_44004068/article/details/107077652

版权

HTML5 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.样式的权重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 样式的冲突：选择不同的选择器，选中相同的元素，并且为相同的样式设置不同值时，发生样式的冲突
         发生冲突时，由选择器的权重决定
         
        选择器权重：
        内联样式：       1,0,0,0    <p style=""></p>
        id选择器：       0,1,0,0     #box{}
        类和伪类选择器：  0,0,1,0     .box{}
        元素选择器：      0,0,0,1     p{}
        通配选择器        0,0,0,0    *{}
        继承的样式：     没有优先级   
        
        比较优先级时，所有选择则其的优先级进行相加计算
        选择器的累加并不会超过最大的数量级，类选择器再怎么加也不会超过id选择器
        如果优先级计算后相同，优先使用靠下的样式
        
        可以在某一个样式后面添加 !important 此时该样式会获取到最高的优先级，甚至超过内联样式
        但尽可能不要用
    -->
    <style>
        #box{
            background-color: coral;
        }
        div#box{
            background-color:burlywood;
        }
        div{
            background-color: aqua;
        }
        .red{
            background-color: blue;
        }
        /* div是类选择器，而red是元素选择器 */
        /* 不会跨数量级，比如11个类选择器一起，并不会比id选择器高 */
    </style>
</head>
<body>
    <div id="box">哈啊</div>
</body>
</html>

2.颜色

Document

宋辰轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初入WEB前端（13）CSS样式的权重、颜色

1.样式的权重<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 样式的冲突：选择不同的选择器，选中相同的元素，并
复制链接

扫一扫