一、类型选择器:定义某种标签样式的选择器
/* 标签选择器 */
p{
color:red;
}
div{
color:gray;
}
/* 类选择器 */
.firstclass{
color:blue;
}
/*ID选择器*/
#firstid{
padding:10px;
}
二、属性选择器:包含某种属性的选择器
- 包含完整属性的元素
- [属性A]---->包含该属性A的所有元素
- [属性A=属性值B]---->包含属性A且属性值为B的所有元素
- [属性A~=属性值B]---->包含属性A且属性值为B,即使属性A还有其他属性值,均以B为优先
- 包含符合属性表达式的元素
- [属性A |= abc]---->选择属性值为唯一的字符串abc或以“-”连接的abc-bcd开头的元素("-"用于处理语言编码)
- [属性A ^= abc]---->选择属性值为字符串abc开头的元素
- [属性A $= abc]---->选择属性值为字符串abc结尾的元素
- [属性A *= abc]---->选择属性值包含字符串abc的元素
三、伪类选择器:节点处于确定状态,用:定义
四、伪元素选择器:位于节点内容的确定位置,用::定义
伪类和伪元素内容较多请自行觅食:
五、组合选择器:包含递进关联关系的选择器组合(作用于单个节点)
- A B{}:选择A节点下的所有后代节点
- A>B{}:选择A节点下的第一个后代节点
- A+B{}:A,B有相同父节点,B紧跟A之后
- A~B{}:A,B有相同父节点,B在A之后但不一定紧跟
六、多用选择器:使用逗号分隔,可适配多个类型选择器(作用于多个节点)
- A,B,C,D{}:多个结点共同作用
参考资料:
https://www.cnblogs.com/gugege/p/6340422.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/position