• 技术文章 >web前端 >html教程

    CSS选择器优先级 - 走一趟再说

    2016-05-22 17:19:46原创846
    1.类的覆盖顺序和应用的时候引用的顺序没关系,覆盖顺序取决于类定义的顺序
    例如:
        .a{
            color:red
        }
        .b{
            color:green
        }

    由于b晚于a定义,所以b覆盖a,反之则a覆盖b
    2.类选择器优先级大于标签选择器;
    例如:
        div{
            color:red
        }
        .div{
            color:green
        }

    .div将覆盖div
    3.类选择器优先级等于纯属性选择器,谁后定义谁优先级高,例如:
        [data-name='div']{
             color: red 
         }
         .a{ 
             color:blue 
         }

    .a将覆盖[data-name='div'],反之[data-name='div']覆盖.a
    4.类选择器优先级小于标签+属性组合选择器,例如:
        div[data-name='div']{
             color: red 
         }
         .a{ 
             color:blue 
         }

    .a将被div[data-name='div']覆盖
    5.类选择器优先级小于id选择器,例如:
        .a{
             color:blue 
         } 
         #div{ 
             color: red 
         }

    .a将被#div覆盖
    6.标签+属性组合选择器优先级小于id选择器,例如:
        [data-name='div']{ 
             color:blue
         }
         #div{ 
             color: red
        }

    #div将会覆盖[data-name='div']
    7.标签选择器优先级小于id选择器,例如:
        div{ 
             color:blue
         } 
         #div{
             color: red 
         }

    #div将会覆盖div
    8.标签选择器优先级小于纯属性选择器,例如:
        div{ 
             color:blue 
         }
        [data-name='div']{ 
             color: red 
         }

    div将会被 [data-name='div']覆盖
    综上所述: 标签选择器<类选择器=纯属性选择器(先定义会被覆盖)<标签+属性组合选择器
    以上是一个一个试出来的,错误的地方还望指正。
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:自己定义flash的宽和高 - 柒柒701 下一篇:IE兼容问题,各类css hack代码(亲测有效) - 平底斜
    20期PHP线上班

    相关文章推荐

    精选22门好课,价值3725元,开通VIP免费学习!• 如何向当前的html文档输入一段字符_html/css_WEB-ITnose• 牛腩发布系统CSS盒子模型基础_html/css_WEB-ITnose• CSS 求大神,求指导 ._html/css_WEB-ITnose• html网页中DOCTYPE疑问_html/css_WEB-ITnose• bootstrap问题 高手在哪里?_html/css_WEB-ITnose
    1/1

    PHP中文网