CSS选择器（基本选择器，结构选择器，属性选择器， 伪类选择器）

CSS选择器

基本选择器和结构选择器

选择器	示例	描述
.class	.testclass	选择 class="testclass " 的所有元素
#id	#testid	选择 id=“testid” 的所有元素
*	*	选择所有元素
element	p	选择所有p元素
element,element	div,p	选择所有元素和所有p元素
element element	div p	选择div内部的所有后代是p的元素
element>element	div>p	选择div所有子元素为p的元素
element+element	div+p	选择紧接在div元素之后的所有p元素

属性选择器

选择器	示例	描述
[attribute]	[target]	带有 target 属性所有元素
[attribute=value]	[target=_blank]	targe 属性 等于"_blank" 的所有元素
[attribute~=value]	[title~=test]	title 属性包含单词 “test” 的所有元素
[attribute=value]	[title=cs]	title 属性值为 "cs"的单词，或cs-go 以-连接的的独立单词
[attribute*=value]	a[src*=“test”]	src 属性中包含 “test” 子串的每个 元素
[attribute^=value]	a[src^=“https”]	src 属性值以 “https” 开头的每个 元素
[attribute$=value]	a[src$=".jpeg"]	src 属性以 “.jpeg” 结尾的所有 元素

伪类选择器

状态	示例	说明
:link	a:link	选择所有未被访问的链接
:visited	a:visited	选择所有已被访问的链接
:hover	a:hover	鼠标移动到元素上时
:active	a:active	点击正在发生时
:focus	input::focus	选择获得焦点的 input 元素
:root	:root	选择文档的根元素即html。
:empty	p:empty
:first-child	p:first-child
:last-child	p:last-child
:first-of-type	p:first-of-type
:last-of-type	p:last-of-type
:only-of-type	p:only-of-type
:only-child	p:only-child
:nth-child(n)	p:nth-child(2)
:nth-child(odd)	p:nth-child(odd)
:nth-child(even)	p:nth-child(even)
:nth-of-type(n)	p:nth-of-type(2)
:nth-last-child(n)	p:nth-last-child(2)
:nth-last-of-type(n)	p:nth-last-of-type(2)