html选择器以及选择器权重

113 阅读1分钟
标签选择器
div{
    //...
}

类选择器(用class属性)
.name{
    //...
}

id选择器(用id属性)
#name{
    //...
}

id选择器 > 类选择器 > 标签选择器
通过!important提高权重
div{
    color:red!important;
}

层级选择器
主要应用在选择父元素下的子元素.
.box span{...}
.box .red{...}

组选择器
多个选择器,有相同的部分
.box1, .box2, .box3{...}//写共有的
.box1{...}//写私有的
.box2{...}//写私有的
.box3{...}//写私有的

伪类元素选择器hover//表示鼠标悬浮在元素上时的状态
.box1:hover{...}

伪元素选择器before,after//通过样式在元素中插入内容
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}