CSS选择器食用法则

一、类型选择器：定义某种标签样式的选择器

/* 标签选择器 */
p{
    color:red;
}
div{
    color:gray;
}
/* 类选择器 */
.firstclass{
    color:blue;
}
/*ID选择器*/
#firstid{
    padding:10px;
}

二、属性选择器：包含某种属性的选择器

• 包含完整属性的元素 

1. [属性A]---->包含该属性A的所有元素
2. [属性A=属性值B]---->包含属性A且属性值为B的所有元素
3. [属性A~=属性值B]---->包含属性A且属性值为B，即使属性A还有其他属性值，均以B为优先

• 包含符合属性表达式的元素

1. [属性A |= abc]---->选择属性值为唯一的字符串abc或以“-”连接的abc-bcd开头的元素（"-"用于处理语言编码）
2. [属性A ^= abc]---->选择属性值为字符串abc开头的元素
3. [属性A $= abc]---->选择属性值为字符串abc结尾的元素
4. [属性A *= abc]---->选择属性值包含字符串abc的元素

三、伪类选择器：节点处于确定状态，用：定义

四、伪元素选择器：位于节点内容的确定位置，用：：定义

伪类和伪元素内容较多请自行觅食：

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

五、组合选择器：包含递进关联关系的选择器组合（作用於单个节点）

• 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