当前位置:Gxlcms > html代码 > CSS选择器优先级-走一趟再说

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

时间:2021-07-01 10:21:17 帮助过:33人阅读

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']覆盖
综上所述: 标签选择器<类选择器=纯属性选择器(先定义会被覆盖)<标签+属性组合选择器
以上是一个一个试出来的,错误的地方还望指正。

人气教程排行