美文网首页
css选择器的优先级

css选择器的优先级

作者: 胡自鲜 | 来源:发表于2017-08-18 20:41 被阅读0次

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;

}

颜色为绿色

相关文章

网友评论

      本文标题: css选择器的优先级

      本文链接:https://www.haomeiwen.com/subject/oyfzrxtx.html