Home > Article > Web Front-end > CSS选择器优先级 - 走一趟再说

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

WBOYOriginal: 2016-05-22 17:19:461532browse

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']覆盖

综上所述： 标签选择器

以上是一个一个试出来的，错误的地方还望指正。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：自己定义flash的宽和高 - 柒柒701Next article：IE兼容问题，各类css hack代码（亲测有效） - 平底斜

See more

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

Related articles