CSS选择器的规则
(1)selector{
name1: value1;
name2: value2
}
(其中分号表示分隔符, 而不是像编程语言中表示语句结束符)
(2)CSS选择器有不同的匹配规则
例如一个元素既可以通过元素选择器又可以通过类选择器来匹配
(3)多个选择器可以进行叠加
例如元素选择器和类选择器进行叠加: p .class_name
CSS选择器的作用
用于匹配HTML中的元素
CSS选择器的分类
(1)元素选择器 p{}
(2)伪元素选择器 ::before{}
(3)类选择器 .class_name{}
(4)伪类选择器 :hover{}
(5)属性选择器 [type=radio]{}
(6)ID选择器 #id_name{}
(7)组合选择器 [type=checkbox] + label{}
(8)否定选择器 :not(.class_name){}
(9)通用选择器 *{}
其中有必要说明下伪类选择器和伪元素选择器的区别:
伪类选择器，鼠标指向一个元素时, 附加一种状态的样式
伪元素选择器，一种真实存在的元素，页面中可以有内容和样式
选择器权重
ID选择器: +100
类 、伪类选择器: +10
元素、伪元素选择器: +1
其他选择器: +0
(1)谁的权重大，优先选择谁
#id .class_name1 (权重为110)
#.calss_name1 .classname2 (权重为20)
此外需要注意的是权重不进位，如下
.class_name1 .class_name2 .class_name3 .class_name4 .class_name5 .class_name6 .class_name7 .class_name8 .class_name9 .class_name10
你是不是会以为上面的组合选择器权重为100？ 嗯嗯,我也是这么想的
然而它的权重为0100, 其中百位数为0, 十位数为10, 个位数为0
上面的选择器是小于#id_name1选择器的, 并不是等于哦，因为权重并不进位
(2)!important 优先级最高
(3)元素属性优先级高 (.css文件的优先级, <style></style>和ID选择器都小于元素属性的优先级(<p style="color: red;"),)
(4)权重相同，后写的生效
CSS选择器
原文地址：https://www.cnblogs.com/marton/p/9589001.html