标签选择器
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:'行尾文字';}