css选择器的优先级

css选择器的优先级:

    通配选择器  0

    标签名选择器  1

    类选择器  10

    id选择器  100

    后代选择器  选择器1 选择器2 ...(会有相加的过程)

    群组选择器  选择器1,选择器2,...(不会有相加的过程)

            1.相同类型的选择器,样式冲突下,后覆盖前

            2.不同类型的选择器,样式冲突下,优先级高覆盖优先级低

            3.*< Tags < class < id < style < !important

            4.!important慎用(必须用时,需要加注释说明一下)

1.同类型,后覆盖前

 body{

    width: 200px;

    height: 300px;

    background: red;

}

body{

    background: blue;

}

颜色为蓝色

2.不同类型,优先级高的会覆盖优先级低的

div{

    height: 200PX;

    background: red;

}

.cla{

    background: pink;

}

颜色为粉红色

3.群组选择器,不会有相加的过程

span{

     display: block;

    width:200px;

    height: 200px;

    background: red;

}

div{

    width:200px;

    height: 200px;

    background: blue;

}

span,div{

    width: 200px;

    height:200px;

    background: pink;

}

颜色为粉红色

4.后代选择器,会有相加的过程

div span a{

    background: red;

}

div span{

    background: green;

}

颜色为绿色

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容