css3新增了哪些選擇符

css3新增的選擇子有：「:first-of-type」、「:last-of-type」、「:last-child」、「:root」、「:empty」、「 :target」、「:enabled」、「:disabled」、「:valid」等等。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

要使用css對HTML頁面中的元素實作一對一，一對多或多對一的控制，這就需要用到CSS選擇器。

HTML頁面中的元素就是透過CSS選擇器來控制的。

CSS選擇器用來選擇你想要的元素的樣式的模式。

css3新增的選擇符號

CSS3新增的選擇器主要分為屬性選擇器、關係選擇器、結構化偽類別選擇器、偽元素選擇器4類，具體介紹如下：

1、屬性選擇器

## 屬性選擇器可以根據網頁標記的屬性及屬性值來選擇標記。

屬性選擇器主要包括

E[att^=value]、E[att$=value]和E[att*=value]這三種性選擇器。

2、關係選擇器

CSS3中的關係選擇器主要包含子代選擇器和兄弟選擇器。

(1)關係選擇器

(2)接近兄弟選擇器

(3)普通兄弟選擇器

3、結構化偽類選擇器

結構化偽類選擇器可以減少文件內class屬性和id屬性的定義，讓文件變得更簡潔。

4、偽元素選擇器

偽元素選擇器一般是一個標記後面緊跟英文冒號“

:”，英文冒號後是偽元素名。

css3新增的選擇符清單#

##3:last-of-typep:last-of-type選擇每個#3:only-of-type p:only-of-type選擇每個3:only-childp:only-child選擇每個3#:nth-child(p:nth-child(2)選擇每個3:nth-last-child(p:nth-last-child(2)選擇每個3:nth-of-type(p:nth-of-type(2)選擇每個3##:nth- last-of-type(n

:last-child

:root:empty

:target##選擇目前活動的#news元素（包含該錨名稱的點擊的URL）3:enabledinput:enabled選擇每一個已啟用的輸入元素3:disabled#input:disabledinput:checkedselector)

::selection:out-of-range<>##:required用於匹配設定了"required" 屬性的元素3#:valid:valid用於匹配輸入值為合法的元素3:invalid:invalid

選擇器	範例	範例說明	CSS
element1~element2	p~ul	#選擇 元素之後的每一個ul元素	#3
[attribute^=value]	a[src^="https"]	選擇每一個src屬性的值以"https"開頭的元素	3
#[attribute$= value]	a[src$=".pdf"]	選擇每一個src屬性的值以".pdf"結尾的元素	3
[attribute*=value]	a[src*="44lan"]	選擇每一個src屬性的值包含子字串"44lan"的元素	3
#:first-of-type	p:first -of-type	選擇每個 元素是其父級的第一個 元素
		元素是其父級的最後一個 元素
		元素是其父級的唯一 元素
		< ;P>元素是其父級的唯一子元素
n)		元素是其父級的第二個子元素
n)		元素的是其父級的第二個子元素，從最後一個子項計數
n)		< P>元素是其父級的第二個 元素
)p:nth-last-of-type(2)	選擇每個	元素的是其父級的第二個 元素，從最後一個子項計數 3
p:last-child	選擇每個	元素是其父級的最後一個子級。 3
:root	選擇文件的根元素	#3
p:empty	#選擇每個沒有任何子層級的	元素（包括文字節點） 3
#news:target
##選擇每一個已停用的輸入元素	3		:checked
選擇每個選取的輸入元素	3		:not(
:not(p)選擇每個並非	元素的元素	3	::selection
符合元素中被使用者選中或是高亮狀態的部分	3		:out-of-range
#匹配值在指定區間之外的	input	元素	3
:in-range	:in-range	符合值在指定區間之內的 <input>元素	3
:read-write	:read-write	用來符合可讀及可寫的元素	3
:read-only	: read-only	用於匹配設定"readonly"（唯讀） 屬性的元素	#3
:optional	:optional	用來符合可選的輸入元素	3
#:required
	##用於符合輸入值為非法的元素	3

」擴充知識：css1、css2的選擇符清單

選擇器範例範例說明CSS.#.intro選擇所有class="intro"的元素##1選擇所有id="firstname"的元素##**##*2p1#div,pdiv p##選擇

元素內的所有

元素

#elementelement選擇所有父級是

元素的

元素

elementelementdiv pattribute選擇所有帶有target屬性元素##2=][target=_blank]選擇所有使用target= "_blank"的元素2~=][title ~=flower]選擇標題屬性包含單字"flower"的所有元素2[|= ][lang|=en]選擇一個lang屬性的起始值="EN"的所有元素2:linka:link選擇所有未存取連結1:visiteda:visited選擇所有造訪的連結#1a:activea:hover:focus2:first-letter選擇每一個

元素的第一個字母

11 :after

	class
			##firstname
#1
選擇所有元素			element
選擇所有			element,element
選擇所有元素1		#element element
1	>		#div>p
2
選擇所有緊接著 元素之後的 元素##2	[	]	[target]
[attribute	value
[attribute	value
		attribute	language
			##:active
選擇活動連結	1		#:hover
選擇滑鼠在連結上面時	1	#input:focus	選擇具有焦點的輸入元素
	::first-letterp :
	#::first-line##p: :first-line	選擇每一個 元素的第一行
##: :first-child	p::first-child	#指定只有當 元素是其父級的第一個子級的樣式。	2
::before	#p::before	在每個 元素之前插入內容	2
#::after##p:		在每個 元素之後插入內容	#2

::lang(## #language###)######p:lang(it)######選擇一個lang屬性的起始值="it"的所有

元素####### ##2#############

（學習影片分享：css影片教學、web前端）

以上是css3新增了哪些選擇符的詳細內容。更多資訊請關注PHP中文網其他相關文章！