CSS3新增了很多強大的選擇器
它可以讓我們少寫一些js事件腳本
我們先來看看各個版本的選擇器有哪些
註：
ele代表element元素
attr代表attribute屬性，val代表value屬性值
:xxx都屬於偽類別選擇器，::xxx都屬於偽元素選擇器
有名字的選擇器我盡量細分了
| 選擇器 | #類型 | 範例 | |
|---|---|---|---|
| . | |||
| 類別選擇器 | .demo | 選擇所有class包含demo的元素#id | |
| ID選擇器 | #unique | 選擇所有id是unique的元素 | |
| 元素選擇器 | p | 選擇所有p元素 | |
| 並列選擇器 | h1,h2 | 選擇所有h1元素和h2元素ele ele | |
| 後代選擇器 | p p選擇p元素內的所有p元素 | ##:link | |
| 選擇器a:link | 選擇未存取連結 | : visited | |
| 偽類選擇器a:visited | 選擇造訪過連結 | ##:active | |
| a:active | 選擇活動連結##:hover | ||
| a:hover選擇滑鼠懸浮連結 | : | :first-letter||
| p:first-letter#選擇每個p元素的第一個字母 | : | :first-line
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」
| 類型 | 範例 | 說明 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 通配選擇器 | * | 選擇所有元素 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 直接 | 子元素選擇器 | p>p選擇父級是p元素的p元素 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ## 相鄰兄弟元素選擇器 | p+p | 選擇緊鄰p元素之後的一個p元素 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 屬性選擇器 | [target] | 選擇帶有target屬性的元素 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 屬性選擇器 | [target=_blank] | 選擇有target屬性且屬性值是_blank的元素 | ##[attr~=val] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| [title~=demo] | 選擇有title屬性並且包含單字」demo」的元素 | [attr|= | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 屬性選擇器 | [lang|=en]選擇lang屬性的起始值為EN的元素 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 焦點選擇器 | input:focus#選擇具有焦點的input元素 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| #首子級選擇器 | p:first-child選擇p元素是其父級的第一個子級的元素 | : | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 偽元素選擇器 | p::before在p元素之前插入內容 | #: | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 偽元素選擇器 | p::after在p元素之後插入內容 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 偽類別選擇器 | p:lang(it)選擇lang屬性的起始值是it的p元素 |
| 選擇器 | 類別 | 範例 | #說明 |
|---|---|---|---|
| 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 | ##偽類別選擇器p:first-of-type | 選擇每個p元素是其父級的第一個p元素 | |
| :last-of-type | 偽類別選擇器p:last-of-type | 選擇每個p元素是其父級的最後一個p元素 | |
| 偽類選擇器 | p:only-of-type | 選擇每個p元素是其父級的唯一p元素 | |
| 唯一子元素選擇器 | ##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元素 | |
| 目標元素選擇器 | #new | :target##選擇目前活動的# new元素（包含錨定名稱點擊的URL） | :enabled |
| input:enabled | ##選擇啟用的input元素 | :disabled | |
| input:disabled | 選擇已停用的input元素 | :checked | |
| input:checked | 選擇選取的input元素 | #:not(selector) | |
| #:not(p)選擇不是p元素的元素 | ::selection | ||
| ::selection | 符合元素中被使用者選取或處於高亮狀態的部分 | :out-of-range | |
| #偽類別選擇器:out-of-range | 選擇值在指定區間之外的input元素 | :in-range | |
| 偽類別選擇器:in-range | 選擇值在指定區間內的input元素 | :read-write | |
| 讀寫元素選擇器:read-write | 選擇可讀且可寫入的元素 | ##:read-only | |
| :read-only | 選擇設定了readonly屬性的唯讀元素:optional | ||
| :optional | 選擇可選的input元素:required | ||
| :required | 選擇設定了required屬性的元素:valid | ||
| :valid | 選擇輸入值合法的元素##:invalid | ||
| :invalid選擇輸入值非法的元素 | 属性选择器[attr^=val]，[attr$=val]，[attr*=val] 这三个属性选择器放在一起记 <p class="demo demo1">1</p><p class="demo demo2">2</p><p class="demo demo3">3</p> 登入後複製
说到这个属性选择器，我还要多说一点 子元素选择器下面的一堆什么type、child的选择器都是针对子元素在父元素中的位置的 <p>0</p><p>1</p><p>2</p><p>3</p> 登入後複製 p:first-child{ background-color: red;}登入後複製
p:first-of-type{/*改*/
background-color: red;}登入後複製
其他的也是一样的道理，举一反三 根元素选择器: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可以利用锚点在页面中进行跳转 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;}登入後複製
CSS小图表剩下的选择器大部分都是针对input输入标签的 首先我们需要编写html代码 <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中文網其他相關文章！
相關標籤：
來源：php.cn
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用具有 3 級層次結構的自訂分類法選擇 woocommerce 相關產品
我有一家woocommerce商店，其自訂分類為「運動」。此分類有三個等級-父級、子級、子級-例如：室內運動>競技場運動>籃球。如果使用者查看籃球項目，那麼我希望相關產...
來自於 2024-04-06 20:05:30
0
1
544
MySQL：'從......中選擇文字作為<此處變數或子查詢>”
我有下表，其中包含以下數據：id文本語言1德語文本德語2英文文本英語我想要的是獲得以下格式的結果：german="deutschertext"english=&...
來自於 2024-04-06 19:25:54
0
2
529
無法從網站取得輸入元素
所以我試圖從Twitter獲取一個輸入元素，但當我運行它時，它不斷在節點終端中給我一個這樣的錯誤，結果，由此代碼創建的瀏覽器窗口將自行關閉，因為它找不到正確的輸入選擇器。如何取得正...
來自於 2024-04-06 18:59:57
0
1
442
即使清除後，我的文件輸入的值仍然保留
正如您在螢幕截圖中看到的那樣。我選擇一個文件，保留彈出視窗而不刷新頁面，然後再次打開它，文件輸入仍然是我選擇的文件。 <inputid="fileuploadban...
來自於 2024-04-06 15:44:52
0
1
384
相關專題
更多>
熱門教學
更多>
|
