CSS选择器及其权重优先级

CSS选择器及其权重优先级

CSS选择器

CSS选择器一共有12种，分别为：

1. id选择器
2. class选择器
3. 标签选择器
4. 通用选择器
5. 并集（分组）选择器

/* 用逗号分隔 */
p,.main{
	color:red;
}

6. 交集选择器

/* 中间没有连接符号 */
p.main{
	color:red;
}

7. 后代选择器
8. 子选择器
9. 伪类选择器
10. 伪元素选择器
11. 属性选择器

a[href][title] {
	color:red;
}

12. 兄弟选择器

/* 1. 相邻选择器只能选中紧跟后边的那一个标签,隔开的标签不能被选择 */
p+div{
	color:red;
}
/* 2. 指定选择器后边特定的所有选择器都被选中 */
p~div{
	color:red;
}

CSS选择器权重与优先级

权重

• 内联样式：1000
• id选择器：100
• class选择器：10
• 标签选择器：1
• 通用选择器最低
• 继承的样式优先级为0

优先级

CSS属性+!important > 内联样式 > id选择器 > class选择器=伪类选择器=属性选择器 > 标签选择器=伪元素选择器 > 通用选择器 > 继承的样式

问题：CSS常见选择器有哪些？CSS选择器的权重与优先级是怎样的？
知识点：CSS选择器、CSS选择器权重与优先级