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新增的選擇符清單#
| 選擇器 | 範例 | 範例說明 | 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 | 選擇每個元素是其父級的第一個元素 | ##3|
| p:last-of-type | 選擇每個 | 元素是其父級的最後一個 元素 | #3|
| p:only-of-type | 選擇每個 | 元素是其父級的唯一 元素 | 3|
| p:only-child | 選擇每個 | < ;P>元素是其父級的唯一子元素 | 3|
| n) | p:nth-child(2)選擇每個 | 元素是其父級的第二個子元素 | 3|
| n) | p:nth-last-child(2)選擇每個 | 元素的是其父級的第二個子元素，從最後一個子項計數 | 3|
| n) | p:nth-of-type(2)選擇每個 | < P>元素是其父級的第二個 元素 | 3|
| )p:nth-last-of-type(2) | 選擇每個 | 元素的是其父級的第二個元素，從最後一個子項計數 3 |
|
| p:last-child | 選擇每個 | 元素是其父級的最後一個子級。 3 |
|
| :root | 選擇文件的根元素 | #3 | |
| p:empty | #選擇每個沒有任何子層級的 | 元素（包括文字節點） 3 |
|
| #news:target | ##選擇目前活動的#news元素（包含該錨名稱的點擊的URL）3 | :enabled | |
| 選擇每一個已啟用的輸入元素 | 3 | :disabled | |
| ##選擇每一個已停用的輸入元素 | 3 | :checked | |
| 選擇每個選取的輸入元素 | 3 | :not( | selector|
| :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 | ##:required用於匹配設定了"required" 屬性的元素 | 3 | |
| :valid | 用於匹配輸入值為合法的元素 | 3 | |
| :invalid | ##用於符合輸入值為非法的元素 | 3 |
| 選擇器 | 範例 | 範例說明 | |
|---|---|---|---|
| . | class | #.intro | 選擇所有class="intro"的元素 |
| ##firstname | |||
| #1 | ##** | ||
| 選擇所有元素 | 2element | ||
|
選擇所有 | 1element,element | ||
| 選擇所有 |
#element element | div p | |
| 1 | #element> | element#div>p | |
| 2 | element | element | |
| 選擇所有緊接著 元素之後的 元素##2 |
[ | attribute] | [target] |
| [attribute | =value | ][target=_blank] | 選擇所有使用target= "_blank"的元素 |
| [attribute | ~=value | ][title ~=flower] | 選擇標題屬性包含單字"flower"的所有元素 |
| [ | attribute | |=language | ]|
| 選擇一個lang屬性的起始值="EN"的所有元素 | 2 | :link | |
| 選擇所有未存取連結 | 1 | :visited | |
| 選擇所有造訪的連結 | #1 | ##:active | |
| 選擇活動連結 | 1 | #:hover | |
| 選擇滑鼠在連結上面時 | 1 | :focus
#input:focus |
選擇具有焦點的輸入元素 |
| ::first-letterp : | :first-letter|||
| #::first-line##p: :first-line |
選擇每一個 元素的第一行 |
1 | |
| ##: :first-child | p::first-child |
#指定只有當 元素是其父級的第一個子級的樣式。 |
2 |
| ::before | #p::before |
在每個 元素之前插入內容 |
2 |
| #::after##p: | :after在每個 元素之後插入內容 |
#2 |
元素####### ##2#############
以上是css3新增了哪些選擇符的詳細內容。更多資訊請關注PHP中文網其他相關文章！
