【CSS】css所有选择器,css选择器权重,css权重,MDN内容整理（标注英文名称）

选择器（selectors）

要确认css所有选择器，需要查看MDN文档，大多网络文章描写的不太全面。

MDN文章：
css选择器
属性选择器

列表

基本选择器（Basic selectors）

名称	语法	权值
通用选择器（Universal selector）	*	0
元素选择器（Type selector）	elementName	1
类选择器（Class selector）	.className	10
Id选择器（ID selector）	#id	100
属性选择器（Attribute selector）	[attr]	10

分组选择器（Grouping selectors）

名称	语法	权值
选择器列表（Selector list）	element, element, element	0

组合器（Combinators）

名称	语法	权值
后代组合器（Descendant combinator）	A B	0
直接子代组合器（Child combinator）	A > B	0
一般兄弟组合器（General sibling combinator）	A ~ B	0
紧邻兄弟组合器（Adjacent sibling combinator）	A + B	0
列组合器（Column combinator） 实验性功能，目前没有兼容的浏览器	A || B	0

伪选择器（Pseudo）

名称	语法	权值
伪元素（Pseudo-elements）	::	1
伪类 (Pseudo-classes)	:	10

权重

有权重的选择器

名称	例子	权值
id选择器	#content	100
类选择器、伪类选择器、属性选择器	.content，:hover，[attribute]	10
元素选择器、伪元素选择器	div, ::after	1

css权重：

名称	例子	权值
!important	color:red !important	10000
内联样式	style="…"	1000
id选择器	#content	100
类选择器、伪类选择器、属性选择器	.content，:hover，[attribute]	10
元素选择器、伪元素选择器	div, ::after	1
后代组合器、通用选择器， 直接子代组合器，紧邻兄弟组合器、一般兄弟组合器	（空格），*，> ，+，~	0

我的其他文章：
【CSS】css选择器权重，伪类和伪元素
【CSS】属性选择器指定包含字符~和*的区别
【CSS】属性选择器指定开头字符^和|的区别