關於CSS3選擇器的詳細介紹及用法總結

CSS3新增了很多強大的選擇器 

它可以讓我們少寫一些js事件腳本
我們先來看看各個版本的選擇器有哪些
註：
ele代表element元素
attr代表attribute屬性，val代表value屬性值
:xxx都屬於偽類別選擇器，::xxx都屬於偽元素選擇器
有名字的選擇器我盡量細分了

CCS1選擇器

.class類別選擇器選擇所有class包含demo的元素#id#unique選擇所有id是unique的元素ele元素選擇器p選擇所有p元素ele,ele並列選擇器選擇所有h1元素和h2元素ele elep p##:link偽類別: visited偽類別選擇器選擇活動連結##:hover偽類選擇器:first-letter 首字母選擇器:first-line首行選擇器

選擇器	#類型	範例
	.demo
ID選擇器
	h1,h2
後代選擇器	選擇p元素內的所有p元素
選擇器a:link	選擇未存取連結
偽類選擇器a:visited	選擇造訪過連結		##:active
a:active
a:hover選擇滑鼠懸浮連結		:
p:first-letter#選擇每個p元素的第一個字母		:

p:first-line######選擇每一個p元素的第一行# ###########

---

CSS1版本有我們最常使用的經典選擇器
::first-letter和::first-line好像很少用
CSS2中，他兩個只能應用在段落之類的區塊級元素，超連結等行內元素就不能用了
CSS2.1中，：first-letter可以套用所有元素
但是他們可以使用的屬性還是有限制的
這裡就不列出來了，畢竟不常用

---

連結的偽類選擇器（錨偽類）我們通常這樣用

a:link {color: blue;}             /*静态伪类：未访问链接时蓝色*/a:visited {color: purple;}        /*静态伪类：访问过的链接变为紫色*/a:hover {color: red;}             /*动态伪类：鼠标悬浮在链接上变为红色*/a:active {color: orange;}         /*动态伪类：鼠标按下链接时变为橘黄色*/

link-visited-hover-active （LVHA） 是建議的順序，不會覆寫產生衝突
也很好記「綠化LVHuA」

#CSS2選擇器

##選擇器類型範例說明*通配選擇器*選擇所有元素ele>ele直接p>p選擇父級是p元素的p元素#ele+ele[attr]屬性選擇器[attr=val]##[attr~=val] 屬性選擇器[title~=demo]選擇有title屬性並且包含單字」demo」的元素[attr|=language][lang|=en]選擇lang屬性的起始值為EN的元素:focusinput:focus#選擇具有焦點的input元素:first-childp:first-child選擇p元素是其父級的第一個子級的元素::beforep::before在p元素之前插入內容#::afterp::after在p元素之後插入內容:lang(language)p:lang(it)選擇lang屬性的起始值是it的p元素

---

这里需要注意的有p+p相邻兄弟元素选择器
选择的是紧挨着p元素后的一个p元素，
发现一些网站和书上写的都是所有p元素，但我验证了一下发现好像不对

title~demo是说title属性包含demo这个词，属性值之间用空格分隔的单词
像这样5c835f5af69ab4d627c002a937614fe2a376092e9406724d5c271fcc648ed25a是可以选中的
但是eb4c40994cc110e8319006edb7572a58a376092e9406724d5c271fcc648ed25a就不能够选中

语言的选择器不常用过就不说了

::before和::after伪元素选择器要想添加内容，需要使用content属性

p::before {    content: "123";}

我们用after的时候很多时候是为了清除浮动

p::after {    content: "";    display: block;    clear: both;}

至于为什么就不是今天讨论的范畴了(￣_,￣ )

伪类与伪元素

伪元素选择器写成伪类单冒号的形式没什么问题
但是伪类选择器使用双冒号就不能选择元素了

这里说一下伪类和伪元素的区别
伪类我的理解是元素达到一种状态
状态存在，改变样式；状态消失，样式消失
伪元素应该说是操作元素的特定内容
实在分不清都写成单冒号的形式就好了

CSS3选择器

敲这么多终于到关键地方了
CSS3增加了很多强大的选择器，以伪劣选择器为主
CSS1和CSS2版本的选择器加起来都没它多
我们一起来看一下

	子元素選擇器
## 相鄰兄弟元素選擇器	p+p	選擇緊鄰p元素之後的一個p元素
	[target]	選擇帶有target屬性的元素
屬性選擇器	[target=_blank]	選擇有target屬性且屬性值是_blank的元素
屬性選擇器
焦點選擇器
#首子級選擇器
偽元素選擇器
偽元素選擇器
偽類別選擇器

##偽類別選擇器p:first-of-type選擇每個p元素是其父級的第一個p元素偽類別選擇器p:last-of-type選擇每個p元素是其父級的最後一個p元素:only-of-type偽類選擇器p:only-of-type選擇每個p元素是其父級的唯一p元素:only-child唯一子元素選擇器:nth-child(n):nth-last-child (n):nth-of-type(n):nth-last-of-type(n):last-child:root#:empty標籤選擇器:target#new:enabled#偽類別選擇器input:enabled偽類選擇器偽類別選擇器否定選擇器高亮文字選擇器:out-of-range:in-range:read-write只讀元素選擇器選擇設定了readonly屬性的唯讀元素偽類別選擇器選擇可選的input元素偽類別選擇器選擇設定了required屬性的元素合法元素選擇器選擇輸入值合法的元素##:invalid非法元素選擇器

選擇器	類別	範例	#說明
ele~ele	後兄弟元素選擇器	p~p	#選擇p元素之後的所有p元素
[attr^=val]	屬性選擇器	a[src^=https]	選擇src屬性值以https開頭的元素
[attr$=val]	屬性選擇器	a[src$=\.pdf]	選擇src屬性值以.pdf結尾的元素
[attr*=val]	屬性選擇器	a[src*=demo]	選擇src屬性的值包含子字串demo的元素
#:first-of-type
:last-of-type
	##p:only-child	選擇每個p元素是其父級的唯一子元素
偽類別選擇器	p:nth-child(2)	選擇每個p元素是其父級的第二個子元素
偽類別選擇器	p:nth-last-child(2)	選擇每個p元素的是其父級的倒數第二個子元素
偽類選擇器	p:nth-of-type(2)	選擇每個p元素是其父級的第二個p元素
偽類選擇器	p:nth-last-of-type(2)	選擇每個p元素的是其父級的倒數第二個p元素
偽類別選擇器	p:last-child	選擇每個p元素是其父級的最後一個子元素
根元素選擇器	:root	選擇文件根元素
空白	p:empty	選擇無任何子元素（包含文字節點）的p元素
目標元素選擇器		:target##選擇目前活動的# new元素（包含錨定名稱點擊的URL）
	##選擇啟用的input元素		:disabled
input:disabled	選擇已停用的input元素		:checked
input:checked	選擇選取的input元素		#:not(selector)
	#:not(p)選擇不是p元素的元素		::selection
::selection	符合元素中被使用者選取或處於高亮狀態的部分
#偽類別選擇器:out-of-range	選擇值在指定區間之外的input元素
偽類別選擇器:in-range	選擇值在指定區間內的input元素
讀寫元素選擇器:read-write	選擇可讀且可寫入的元素		##:read-only
:read-only			:optional
:optional			:required
:required			:valid
:valid
:invalid選擇輸入值非法的元素		属性选择器 [attr^=val]，[attr$=val]，[attr*=val] 这三个属性选择器放在一起记 也很好记，很想我们正则表达式中用的开头匹配符^，结尾匹配符$，统配匹配符* 同时还要区别于CSS2中的[attr~=val] <p class="demo demo1">1</p><p class="demo demo2">2</p><p class="demo demo3">3</p> [class^=de]可以把三行都选中，因为它们的class属性都是以“de”开头的 [class$=o2]可以选中第二行，因为只有它的class属性是以“o2”结尾的 [class*=em]同样可以选中三行，因为它们class的都包含字符串“em” [class~=de]不能选中任何行，因为它class中以空格分隔的属性值中没有“de”的属性值 说到这个属性选择器，我还要多说一点 我在表格中的示例是这么写的 a[src$=\.pdf] 是因为“.”它不认识，我们需要加“\”转义 不过css中属性选择器也可以写成引号的形式 比如说下面代码时等价的 a[src$=\.pdf] a[src$=".pdf"] a[src$='.pdf'] 子元素选择器 下面的一堆什么type、child的选择器都是针对子元素在父元素中的位置的 表格中列出的很详细了 我主要谈谈type、child的区别， 以最简单的:first-child和:first-of-type为例 <p>0</p><p>1</p><p>2</p><p>3</p> p:first-child{ background-color: red;} 使用first-child我们发现页面没有变化 这是因为p并不是body元素的第一个子元素 p:first-of-type{/*改*/ background-color: red;} 改为first-of-type我们发现第一个p变红了 这是因为它是body元素的子元素中所有p的第一个 其他的也是一样的道理，举一反三 根元素选择器 :root这个选择器没什么意思，和你直接使用html一样 :root {...} html {...} 空元素选择器 :empty就是选择真正的空元素，内部没有任何子元素，文本节点也不能有 举个例子 <p></p><p>1</p><p>2</p><p>3</p> p:empty::before { content: "12345"; background-color: gold;} 目标元素选择器 这个:target选择器还有点意思 写一个例子 <a href="#first">1st</a><br><a href="#second">2nd</a><br><a href="#third">3rd</a><br><a href="#fourth">4th</a><br><a href="#fifth">5th</a><br><br><br><br><br><br><p id="first">1</p><p id="second">2</p><p id="third">3</p><p id="fourth">4</p><p id="fifth">5</p> body { height: 2000px;}p { width: 200px; height: 200px; font: 200px/200px bold;} 这是一个小demo可以利用锚点在页面中进行跳转 点击链接可以跳转到对应id的元素，并且url链接也发生了改变 此时就会触发:target的样式 我们来试一试，加几行代码 p:target { background-color: deeppink;} 再点击链接 我们发现，跳转的同时，p样式改变了 高亮文本选择器 ::selection是CSS3新增的选择器 它用来匹配突出显示的文本（用鼠标选择文本） 浏览器有默认的样式（背景为蓝色，字体为） <p>this is a long long text...</p> p::selection{ color: white; background-color: dodgerblue;} 浏览器默认的样式就是相当于这样，我们可以自己修改 否定选择器 :not()这个选择器可以排除某些特定条件的元素 比如说我们可以这样用 <p class="demo">1</p><p>2</p><p>3</p> p:not(.demo) { background-color: aqua;} 这样类属性中有demo的元素就不会变色 CSS小图表 剩下的选择器大部分都是针对input输入标签的 不详细讲了 我们做一个小练习，仅仅用CSS3的选择器做一个点击按钮切换图片的小图表 通过点击单选框显示不同的图片 像这样 首先我们需要编写html代码 使用三个radio和三个img元素 <input type="radio" name="demo" id="a" checked><img src="a.jpg" ><input type="radio" name="demo" id="b"><img src="b.jpg"><input type="radio" name="demo" id="c"><img src="c.jpg"> 然后css部分通过:checked配合条件选择器控制img元素的显示 input { margin-left: 35px;}img { display: none;}:checked+img { position: absolute; left: 10px; top: 40px; display: inline-block;} 这样我们就完成了我们的小图表功能 整理了一晚上的选择器，可能会有遗漏的 如果想起来，日后再补吧

以上是關於CSS3選擇器的詳細介紹及用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！