P19-前端基础-CSS选择器的权重

举报
brucexiaogui 发表于 2021/11/25 23:12:56 2021/11/25
2.7k+ 0 0
【摘要】 P19-前端基础-CSS选择器的权重 1.概述 样式的冲突 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突。 发生样式冲突时,应用哪个样式由选择器...

P19-前端基础-CSS选择器的权重

1.概述

样式的冲突
当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突。
发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定
选择器的权重

  • 内联样式 1,0,0,0
  • id选择器 0,1,0,0
  • 类和伪类选择器 0,0,1,0
  • 元素选择器 0,0,0,1
  • 通配选择器 0,0,0,0
  • 继承的样式 没有优先级

比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器是单独计算的),
选择器的累加不会超过其最大的数量级,类选择器在高也不会超过id选择器
如果优先级计算后相同,此时则优先使用靠下的样式

可以在某一个样式的后边添加 !important ,则此时该样式会获取到最高的优先级,甚至超过内联样式,
注意:在开发中这个玩意一定要慎用!

2.选择器权重案例

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>选择器的权重</title>

  <style>
    /* 
            样式的冲突
                - 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突。

            发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定

            选择器的权重
                内联样式        1,0,0,0
                id选择器        0,1,0,0
                类和伪类选择器   0,0,1,0
                元素选择器       0,0,0,1
                通配选择器       0,0,0,0
                继承的样式       没有优先级

            比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器是单独计算的),
                选择器的累加不会超过其最大的数量级,类选择器在高也不会超过id选择器
                如果优先级计算后相同,此时则优先使用靠下的样式

            可以在某一个样式的后边添加 !important ,则此时该样式会获取到最高的优先级,甚至超过内联样式,
                注意:在开发中这个玩意一定要慎用!
         */
    /* id选择器权重是100 */
    #box1 {
      background-color: steelblue;
    }

    /* 元素选择器+id选择器权重是1+100=101,大于上面的id选择器权重,因此显示该权重的背景颜色 */
    div#box1 {
      background-color: thistle;
    }

    /* 类选择器,加上!important 权重变为最高,超过内联样式权重 */
    .d1 {
      background-color: wheat !important;
    }

    /* span背景色会改变,是因为span背景色在上面设置的权重中都是集成父元素样式,他的权重低于元素选择器的权重 */
    div,
    p,
    span {
      background-color: tomato;
    }

    /* 通配符优先级是0 */
    * {
      font-size: 50px;
    }

    div {
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div id="box1" class="red d1 d2 d3 d4">我是一个div <span>我是div中的span</span></div>
  <div id="box1" class="red d1 d2 d3 d4" style="background-color: chocolate;">我是一个div <span>我是div中的span</span></div>
</body>

</html>

  
 

3.效果预览

在这里插入图片描述

文章来源: brucelong.blog.csdn.net,作者:Bruce小鬼,版权归原作者所有,如需转载,请联系作者。

原文链接:brucelong.blog.csdn.net/article/details/112779343

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。