zoukankan      html  css  js  c++  java
  • 前端学习 -- Css -- 选择器的优先级

    当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示。
    优先级的规则

    1. 内联样式 , 优先级 1000
    2. id选择器,优先级 100
    3. 类和伪类, 优先级 10
    4. 元素选择器,优先级 1
    5. 通配* , 优先级 0
    6. 继承的样式,没有优先级


    当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式。

    并集选择器的优先级是单独计算
    div , p , #p1 , .hello{}

    可以在样式的最后,添加一个!important,则此时该样式将会获得一个最高的优先级,将会优先于所有的样式显示甚至超过内联样式,但是在开发中尽量避免使用!important

    分别测试下这6种情况:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                .p1 {
                    background-color: yellow;
                }
                
                p {
                    background-color: red;
                }
                
                * {
                    font-size: 50px;
                }
                
                p {
                    font-size: 30px;
                }
                
                #p2 {
                    background-color: yellowgreen;
                }
                
                p#p2 {
                    background-color: red;
                }
                
                .p3 {
                    color: green;
                }
            </style>
        </head>
    
        <body>
    
            <p class="p1 p3" id="p2" style="background-color: orange;">我是一个段落
                <span>我是p标签中的span</span>
            </p>
    
        </body>
    
    </html>

    background-color:

    p#p2 :继承的样式,没有优先级;

    *p:通配* 优先级0;

    p :元素选择器,优先级 1;

    .p1:类和伪类, 优先级 10;

    p2 优先级 100;

    style="background-color: orange;"优先级1000;

    因此背景颜色为 organge。

    color:

    p3:因为只有这一个设置color因此绿色。

  • 相关阅读:
    VC 捕获Windows关机事件
    JAVA多态计算面积main函数调用方法
    Spring MVC 和 Spring 总结
    css知识总结
    数据库mysql大全(高级版)
    springboot+springcloud微服务项目全套资料(笔记+源码+代码)
    eclipse上的maven,添加依赖后无法自动下载相应的jar包
    使用angularJS接收json数据并进行数据的显示
    mybatis的基本语句的应用
    Idea集成maven插件
  • 原文地址:https://www.cnblogs.com/androidsuperman/p/6665981.html
Copyright © 2011-2022 走看看