CSS选择器备忘录

CSS选择器备忘录

1. 基本选择器

   elector	Meaning	Example
   用选择器	匹配任何元素	*
   签选择器	CSS1中称之为元素选择器，匹配为指定标签的所有元素	div
   元素选择器	匹配元素内容中的指定部分，选择器E可省略	E::first-line
   选择器	匹配class属性中包含指定类的元素	.warning
   类选择器	匹配满足某种状态或是符合某种逻辑的元素，选择器E可省略	E:hover或E:first-child
   d选择器	匹配id属性为指定名称的元素	#content

2. 属性选择器

   elector	Meaning	Example
   [att]	匹配满足选择器E的元素的满足选择器F且具有att属性的元素，与属性att值无关；E可省略，下同	p[class]
   [attr="val"]	匹配满足选择器E且att属性值为"val"的元素	p[class~="warning"]
   [attr~="val"]	匹配满足选择器E且att属性中有一个值为"val"的元素	p[class~="warning"]
   [attr^="sub"]	匹配满足选择器E且att属性中有一个值为"sub"开头的元素	p[class^="test-"]
   [attr$="sub"]	匹配满足选择器E且att属性中有一个值为"sub"结尾的元素	a[href$=".pdf"]
   [attr*="sub"]	匹配满足选择器E且att属性中有一个值包含"sub"的元素	div [class*="port"]
   [lang|="val"]	匹配满足选择器E且其lang属性的值为指定val开头的元素，	html[lang|="en"]

   注：lang属性允许开发者为不同的语言定义特殊的规则，语言代码和国家地区对照表详见https://www.cnblogs.com/Robert-huge/p/5481515.html；

3. 组合选择器

   elector	Meaning	Example
   F	匹配满足选择器E的元素的所有满足选择器F的内部元素	body h1
   >F	匹配满足选择器E的元素的满足选择器F的直接子元素	ul > li
   +F	匹配满足选择器E的元素的下一个兄弟元素，且该元素要满足选择器F	h1 + *
   ~F	匹配满足选择器E的元素后面所有满足选择器F的兄弟元素	h1 ~ h2

注：E,F表示匹配满足选择器E或是选择器F的元素，没有将E,F算入组合选择器，因为它完全可以拆分成多个基本选择器或属性选择器，只能算是CSS提供的一种为了减少冗余编码的编码方式。

延伸阅读

[1] 选择器的优先级相关内容详见CSS中的样式层叠机制Cascade

[2] 伪类和伪元素的分析比较详见伪类与伪元素的区别

参考资料

[1] CSS Pocket Reference

[2] CSS选择器笔记