CSS选择器及权重计算

选择器

选择器	标识
通配符选择器	* （能匹配页面中所有的元素）
元素选择器	div
类选择器	.class
id选择器 （CSS3）	#id
伪类选择器
复合选择器	（1）交集(嵌套)选择器 - 点 . （2）并集(分组)选择器 - 逗号 , （3）后代选择器 - 空格 （4）子元素选择器 - 大于号 > 说明： （1）交集选择器：p.one {} 匹配所有类名为one的p元素。 （2） 并集选择器：.one,p,#test {} 用逗号隔开的所有选择器都会执行后面的样式。 （3）后代选择器：.nav ul li {} 类名为nav的元素下的ul元素下的li元素会执行后面的元素。 （4）子元素选择器：.demo > h5 {} 只有类名为demo的元素下的子元素h5会执行后面的样式。
属性选择器 （CSS3）	E[attr] E[attr=value] E[attr*=value] E[attr^=value] E[attr$=value]
伪元素选择器 （CSS3）	E::first-letter E::first-line E::selection E::before E::after

id选择器和类选择器的区别：一个类选择器可以被重复使用多次。一个id选择器只能被使用一次。

更多选择器参考：https://www.runoob.com/cssref/css-selectors.html

权重计算法则

选择器	权重
继承、*通配选择器	0,0,0,0
标签选择器	0,0,0,1
类、伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式	1,0,0,0
!important	无穷大

权重计算示例

p标签的文字颜色为：blue。