CSS3选择器有哪些及怎么使用

魁首哥

作者

CSS3选择器有哪些及怎么使用

今天小编给大家分享一下CSS3选择器有哪些及怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

在 CSS 中，抉择器是一种内容，用于决议需求添加名堂的元素。

CSS3选择器有哪些及怎么使用

"CSS" 列批示该属性是在哪一个 CSS 版本中定义的。（CSS1、CSS2 照常 CSS3。）

决议器	例子	例子刻划	CSS
.class	.intro	抉择 class="intro" 的全数元素。	1
#id	#firstname	决定 id="firstname" 的所有元素。	1
*	*	选择一切元素。	2
element	p	决议全部 <p> 元素。	1
element,element	div,p	选择一切 <div> 元素和全部 <p> 元素。	1
elementelement	div p	抉择 <div> 元素外部的全部 <p> 元素。	1
element 选择器" href="http://www.w3school.com.cn/cssref/sele首席技术官r_element_gt.asp">element>element	div>p	选择父元素为 <div> 元素的全部 <p> 元素。	2
element+element	div+p	决意紧接在 <div> 元素以后的一切 <p> 元素。	2
[attribute]	[target]	决定带有 target 属性一切元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的全体元素。	2
[attribute~=value]	[title~=flower]	决定 title 属性包含单词 "flower" 的所有元素。	2
[attribute\|=value]	[lang\|=en]	决议 lang 属性值以 "en" 最初的全体元素。	2
:link	a:link	决议全部未被走访的链接。	1
:visited	a:visited	决定悉数已被访问的链接。	1
:active	a:active	决议勾当链接。	1
:hover	a:hover	决议鼠标指针位于其上的链接。	1
:focus	input:focus	决意获得核心的 input 元素。	2
:first-letter	p:first-letter	决议每个 <p> 元素的首字母。	1
:first-line	p:first-line	决定每个 <p> 元素的首行。	1
:first-child	p:first-child	抉择属于父元素的第一个子元素的每个 <p> 元素。	2
:before	p:before	在每一个 <p> 元素的内容夙昔插入内容。	2
:after	p:after	在每一个 <p> 元素的内容之后插入内容。	2
:lang(language)	p:lang(it)	决意带有以 "it" 开头的 lang 属性值的每个 <p> 元素。	2
element1~element2	p~ul	选择背面有 <p> 元素的每个 <ul> 元素。	3
[attribute^=value]	a[src^="https"]	决定其 src 属性值以 "https" 一开始的每个 <a> 元素。	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 末端的所有 <a> 元素。	3
[attribute*=value]	a[src*="abc"]	决意其 src 属性中征求 "abc" 子串的每个 <a> 元素。	3
:first-of-type	p:first-of-type	决意属于其父元素的首个 <p> 元素的每个 <p> 元素。	3
:last-of-type	p:last-of-type	决议属于其父元素的最后 <p> 元素的每一个 <p> 元素。	3
:only-of-type	p:only-of-type	决意属于其父元素独一的 <p> 元素的每个 <p> 元素。	3
:only-child	p:only-child	决议属于其父元素的唯一子元素的每个 <p> 元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每一个 <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素起头计数。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，可是从最后一个子元素入手下手计数。	3
:last-child	p:last-child	决定属于其父元素最后一个子元素每个 <p> 元素。	3
:root	:root	抉择文档的根元素。	3
:empty	p:empty	决意没有子元素的每个 <p> 元素（包括文本节点）。	3
:target	#news:target	选择当前勾当的 #news 元素。	3
:enabled	input:enabled	决定每一个启用的 <input> 元素。	3
:disabled	input:disabled	抉择每个禁用的 <input> 元素	3
:checked	input:checked	选择每个当选中的 <input> 元素。	3
:not(selector)	:not(p)	决定非 <p> 元素的每个元素。	3
::selection	::selection	决意被用户选取的元素部门。	3