CSS选择器有哪些？选择器的优先级如何排序？

本文章转载于：https://www.cnblogs.com/AIonTheRoad/p/11283100.html

CSS选择器分类：

CSS的选择器分类可以分为三大类：id选择器，类选择器，标签选择器。

用法如下：

选择器		e.g.	说明
id选择器	#id	#header	选择id="header"的所有元素
类选择器	.class	.message	选择class="message"的所有元素
标签选择器	el	div	选择所有的div元素

其中他们又可以以不同的方式进行组合，如下：

选择器		e.g.	说明
后代选择器	el el	div p	选择div元素内部的所有p元素
子代选择器	el>el	div>p	选择div元素的第一子代的所有p元素
相邻兄弟选择器	el+el	.msg+p	选择与class为"msg"的元素同级且紧跟其后的第一个p元素
通用兄弟选择器	el~el	.msg~p	选择class为"msg"的元素后面的所有p元素
群组选择器	el,el	p, span, .blue,#box	选择所有的p元素、span元素、class为"blue"的元素以及id为"box"的元素
伪类选择器	:link,:visited, :hover, :active, :focus	a:hover	选择鼠标指针位于a标签之上的链接
伪元素选择器	:before, :after	p:before	在每个p元素内容之前插入内容
属性选择器	[attribute]	[target]	选择带有target属性的所有元素
通用选择器	*	*	选择所有的元素

优先级：!important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器

权 重： !important：10000

内联： 1000

id选择器：100

类、伪类、属性选择器：10

标签、伪元素选择器：1

通用选择器（*）、子选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（~）权重值为0