CSS選擇器整理-css教學-PHP中文網

E+FE~F兄弟選擇器選擇E元素所有兄弟元素F這裡要注意幾點：子選擇器只能選中孫選器元素，而不能選中孫字元素；包含選擇符將會選中所有符合條件的後代，包括兒子，孫子，孫子的孫子...在Android Browser4.2.*及以下，偽類選擇器與兄弟選擇符一起使用會有一個bug，查看詳情。描述 [att="val" ]



`相鄰選擇符只會選中符合條件的相鄰的兄弟元素；而兄弟選擇符會選中所有符合條件的兄弟元素，不強制是緊鄰的元素。`		:checked
`屬性選擇器`		選擇器
		選擇具有att屬性且屬性值等於val的E元素

E[att~="val"]

選擇具有att屬性且屬性值其中一個等於val的E元素（包含只有一個值且該值等於val的情況）
E[att|="val"]
選擇具有att屬性且屬性值為以val開頭並用連接符
-分隔的字串的E元素，如果屬性值僅為val，也將被選取

E[att^="val"]

選擇具有att屬性且屬性值為以val開頭的字串的E元素E[att$="val"]選擇具有att屬性且屬性值為以val結尾的字串的E元素E[att*="val"] att屬性且屬性值為包含val的字串的E元素

偽類選擇器

:0 設定超連結a在其連結位址已被存取過時的樣式設定元素滑鼠在其懸停時的樣式E:focusE:checkedE:enabledE:disabledE:emptyEroot:root 。在HTML中，根元素永遠是HTMLE:not(s)匹配不含s選擇符的元素EE:first-childE:first-child一個子元素E匹配父元素的最後一個子元素E匹配父元素的第n個子元素EE:first-of-typeE:last--type-type-type的最後一個同級兄弟元素EE:only-of-type匹配同類型中的唯一的一個同級兄弟元素E匹配同類型中的第n個同級兄弟元素E匹配同類型中的倒數第n個同級兄弟元素E

選擇器描述

E:link

E:hover

。使用者啟動（滑鼠點擊與釋放之間發生的事件）時的樣式

設定元素在成為輸入焦點（此元素的onfocus事件發生）時的樣式。 (一般應用於表單元素)

匹配使用者介面上處於選取狀態的元素E。 (用於input type為radio與checkbox時)

匹配使用者介面上處於可用狀態的元素E。 (一般應用於表單元素)

匹配使用者介面上處於停用狀態的元素E。 (一般應用於表單元素)

匹配沒有任何子元素（包括text節點）的元素E

E:last-child

E:only-childE

E:nth-child(n)

E:nth-last-child(n) E:nth-last-child(n)

E:nth-last-child(n)個子元素E

匹配同類型中的第一個同級兄弟元素E

)

E:nth-last-of-type(n)

<p>注意事项：</p>
<ul class=" list-paddingleft-2">
<li><p>超链接的4种状态(访问前，鼠标悬停，当前被点击，已访问)，需要有特定的书写顺序才能生效；<strong>a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后</strong>。</p></li>
<li><p><code>E:first-child

选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。

关于`:not()`的用法

假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线。

 li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

登入後複製

上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线。是不是很方便。

关于`:nth-child()`的用法

要使E:nth-child(n)生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。:first-child、:last-child、:only-child、:nth-last-child(n)也是一样。
nth-child(n)括号里的n可以是一个数字，一个关键字，或者一个公式。

:nth-child(length) /*参数是具体数字 length为整数*/
:nth-child(n) /*参数是n,n从0开始计算*/
:nth-child(n*length) /*n的倍数选择，n从0开始算*/
:nth-child(n+length) /*选择大于等于length后面的元素*/
:nth-child(-n+length) /*选择小于等于length前面的元素*/
:nth-child(n*length+1) /*表示隔几选一*/
:nth-child(2n) / :nth-child(even) /*表示偶数*/
:nth-child(2n+1) / :nth-child(odd) /*表示奇数*/

登入後複製

关于`:...-child`和`:...-of-type`的差异

这两个系列的属性确实很相似，对于不熟悉的人可能很难区分。

E:first-of-type 总是能命中父元素的第1个为E的子元素，不论父元素第1个子元素是否为E；而E:first-child里的E元素必须是它的兄弟元素中的第一个元素，否则匹配失效。E:last-of-type 与E:last-child也是同理。
E:nth-of-type(n)总是能命中父元素的第n个为E的子元素，不论父元素第n个子元素是否为E；而E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。
关于:nth-child()与:nth-of-type()的区别可以看这篇文章

用`:empty`区分空元素

选择不包含子元素的p元素：

p:empty

登入後複製

选择包含子元素的p元素：

p:not(:empty)

登入後複製

伪对象选择器

选择器	描述
`E:before`/`E::before`	在目标元素E的前面插入的内容。用来和content属性一起使用
`E:after`/`E::after`	在目标元素E的后面插入的内容。用来和content属性一起使用
`E:first-letter`/`E::first-letter`	设置元素内的第一个字符的样式
`E:first-line`/`E::first-line`	设置元素内的第一行的样式
`E::placeholder`	设置元素文字占位符的样式。(一般用于input输入框)
`E::selection`	设置元素被选择时的字体颜色和背景颜色

注意事项：

::placeholder在使用时需要加上各个浏览器的前缀；除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder。

总结

选择器用得好其实可以让我们少些很多代码。其实还有一些东西没有展开来讲，比如:before和:after，后面专门写一篇文章来说。

很多人都覺得CSS特別簡單，但其實真正寫好CSS並不容易，CSS的每一點其實內容都很多，就拿選擇器來說，CSS選擇器大概可以分為五類：

元素選擇器
關係選擇器
屬性選擇器
選擇器
名稱

描述

*選擇指定的元素id選擇器選擇id屬性等於idName的元素CSS關係選擇器選擇器名稱描述子選擇器

		配選擇器
#idName
.className	元素選擇器只要是寫	都會常用，這一塊的內容非常簡單，沒什麼特別要說的。

		E >F

選擇所有作為E元素的子元素F



`相鄰選擇符只會選中符合條件的相鄰的兄弟元素；而兄弟選擇符會選中所有符合條件的兄弟元素，不強制是緊鄰的元素。`		:checked
`屬性選擇器`		選擇器
		選擇具有att屬性且屬性值等於val的E元素

E[att~="val"]

選擇具有att屬性且屬性值其中一個等於val的E元素（包含只有一個值且該值等於val的情況）
E[att|="val"]
選擇具有att屬性且屬性值為以val開頭並用連接符
-分隔的字串的E元素，如果屬性值僅為val，也將被選取

E[att^="val"]

偽類選擇器

選擇器描述

E:link

E:hover

。使用者啟動（滑鼠點擊與釋放之間發生的事件）時的樣式

設定元素在成為輸入焦點（此元素的onfocus事件發生）時的樣式。 (一般應用於表單元素)

匹配使用者介面上處於選取狀態的元素E。 (用於input type為radio與checkbox時)

匹配使用者介面上處於可用狀態的元素E。 (一般應用於表單元素)

匹配使用者介面上處於停用狀態的元素E。 (一般應用於表單元素)

匹配沒有任何子元素（包括text節點）的元素E

E:last-child

E:only-childE

E:nth-child(n)

E:nth-last-child(n) E:nth-last-child(n)

E:nth-last-child(n)個子元素E

匹配同類型中的第一個同級兄弟元素E

)

E:nth-last-of-type(n)

<p>注意事項：</p>
<ul class=" list-paddingleft-2">
<li><p>超連結的4種狀態(訪問前，滑鼠懸停，目前被點擊，已訪問)，需要有特定的書寫順序才能生效；<strong>a:hover 必須位於a:link 和a :visited 之後，a:active 必須位於a:hover 之後</strong>。 </p></li>
<li><p><code>E:first-child

選擇符，E必須是它的兄弟元素中的第一個元素，換言之，E必須是父元素的第一個子元素。與之類似的偽類還有E:last-child，只不過情況正好相反，需要它是最後一個子元素。

關於`:not()`的用法

假定有個列表，每個列表項目都有一條底邊線，但是最後一項不需要底線。

 li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

登入後複製

上述程式碼的意思是：為該列表中除最後一項外的所有列表項目加上一條底邊線。是不是很方便。

關於`:nth-child()`的用法

要使E:nth-child(n)生效，E元素必須是某個元素的子元素，E的父元素最高是body，即E可以是body的子元素。 :first-child、:last-child、:only-child、:nth-last-child(n)也是一樣。
nth-child(n)括號裡的n可以是一個數字，一個關鍵字，或一個公式。

:nth-child(length) /*参数是具体数字 length为整数*/
:nth-child(n) /*参数是n,n从0开始计算*/
:nth-child(n*length) /*n的倍数选择，n从0开始算*/
:nth-child(n+length) /*选择大于等于length后面的元素*/
:nth-child(-n+length) /*选择小于等于length前面的元素*/
:nth-child(n*length+1) /*表示隔几选一*/
:nth-child(2n) / :nth-child(even) /*表示偶数*/
:nth-child(2n+1) / :nth-child(odd) /*表示奇数*/

登入後複製

關於`:...-child`和`:...-of-type`的差異

這兩個系列的屬性確實很相似，對於不熟悉的人可能很難區分。

E:first-of-type 總是能命中父元素的第1個為E的子元素，不論父元素第1個子元素是否為E；而E:first-child裡的E元素必須是它的兄弟元素中的第一個元素，否則匹配失效。 E:last-of-type 與E:last-child也是同理。
E:nth-of-type(n)總是能命中父元素的第n個為E的子元素，不論父元素第n個子元素是否為E；而E:nth-child( n)會選擇父元素的第n個子元素E，如果第n個子元素不是E，則是無效選擇符，但n會遞增。
關於:nth-child()與:nth-of-type()的區別可以看這篇文章

用`:empty`區分空元素

選擇不包含子元素的p元素：包含子元素

p:empty

登入後複製

選擇包含子元素的p元素：

p:not(:empty)

登入後複製

偽物件選擇器

在目標元素E的前面插入的內容。用來和content屬性一起使用: /E::first-line設定元素文字佔位符的樣式。 (一般用於input輸入框)設定元素被選擇時的字體顏色和背景顏色::[prefix]placeholder::[prefix]input-placeholder。 :before和:after

選擇器	描述
`E:after`/`E::after`	在目標元素E的後面插入的內容。用來和content屬性一起使用
`E:first-letter`/`E::first-letter`	設定元素內的第一個字元的樣式
`設定元素內的第一行的樣式`	E::placeholder
E::selection
注意事項：使用於館時需要加上各個瀏覽器的前綴；除了Firefox是	，其他瀏覽器都是使用
總結	選擇器用得好其實可以讓我們少些很多程式碼。其實還有一些東西沒有展開來講，像是

，後面專門寫一篇文章來說。

更多CSS選擇器整理相關文章請關注PHP中文網！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7492

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何調整HTML文字方塊的大小 Feb 20, 2024 am 10:03 AM

HTML文字方塊大小的設定在前端開發中是非常常見的操作。本文將介紹如何設定文字方塊的尺寸，並提供具體的程式碼範例。在HTML中，可以使用CSS來設定文字方塊的尺寸。具體的程式碼如下：input[type="text&quot

如何調整WordPress主題避免錯位顯示 Mar 05, 2024 pm 02:03 PM

如何調整WordPress主題避免錯位顯示，需要具體程式碼範例WordPress作為一個功能強大的CMS系統，受到了許多網站開發者和站長的喜愛。然而，在使用WordPress建立網站時，經常會遇到主題錯位顯示的問題，這對於使用者體驗和頁面美觀都會造成影響。因此，合理調整WordPress主題以避免錯位顯示是非常重要的。本文將介紹如何透過具體的程式碼範例來進行主題調

css選擇器排除部分的元素是什麼 Apr 06, 2024 am 02:42 AM

:not() 選擇器可用來排除特定條件的元素，其語法為 :not(selector) {樣式規則}。範例：:not(p) 排除所有非段落元素，li:not(.active) 排除非活動清單項，:not(table) 排除非表格元素，div:not([data-role="primary"])排除非primary 角色的div 元素。

css選擇器優先權是什麼 Apr 25, 2024 pm 05:30 PM

CSS 選擇器優先權依下列順序決定：特殊性（ID > 類別> 類型> 通配符）來源順序（行內> 內部樣式表> 外部樣式表> 使用者代理樣式表）宣告順序（靠後的宣告優先）重要性（!important 強制提高優先權）

H5頁面製作究竟指什麼 Apr 06, 2025 am 07:18 AM

H5 頁面製作是指使用 HTML5、CSS3 和 JavaScript 等技術，創建跨平台兼容的網頁。其核心在於瀏覽器解析代碼，渲染結構、樣式和交互功能。常見技術包括動畫效果、響應式設計和數據交互。為避免錯誤，應使用開發者工具調試；而性能優化和最佳實踐則包括圖像格式優化、減少請求和代碼規範等，以提高加載速度和代碼質量。

css選擇器哪些是進階選擇器 Oct 07, 2023 pm 02:59 PM

css選擇器中的高級選擇器有後代選擇器、子元素選擇器、相鄰兄弟選擇器、通用兄弟選擇器、屬性選擇器、類別選擇器、ID選擇器、偽類選擇器和偽元素選擇器等。詳細介紹：1、後代選擇器使用空格分隔的選擇器，表示選取某個元素的後代元素；2、子元素選擇器使用大於號分隔的選擇器，表示選取某個元素的直接子元素；3、相鄰兄弟選擇器使用加號分隔的選擇器，表示選取緊接在某個元素後面的第一個兄弟元素等等。

了解CSS選擇器通配符的權重和優先順序的深層理解 Dec 26, 2023 pm 01:36 PM

深入理解CSS選擇器通配符的權重和優先權在CSS樣式表中，選擇器是用來指定樣式套用於哪些HTML元素的重要工具。選擇器的優先權和權重決定了當多個規則同時作用於一個HTML元素時，要套用哪個樣式。通配符選擇器是CSS中常見的選擇器。它使用“*”符號表示，表示匹配所有HTML元素。通配符選擇器雖然簡單，但在某些情況下非常有用。然而，通配符選擇器的權重和優先權也

學會使用CSS選擇器的基本文法 Jan 13, 2024 am 11:44 AM

掌握基本的CSS選擇器語法，需要具體程式碼範例CSS選擇器是前端開發中非常重要的一部分，它可以用來選擇和修改HTML文件的各個元素。掌握基本的CSS選擇器語法對於編寫高效率的樣式表是至關重要的。本文將介紹一些常見的CSS選擇器以及對應的程式碼範例。元素選擇器元素選擇器是最基本的選擇器，可以透過元素的標籤名稱來選擇對應的元素。例如，要選擇所有的段落（p元素），可以使用

See all articles

CSS選擇器整理

E[att^="val"]

偽類選擇器

关于:not()的用法

关于:nth-child()的用法

关于:...-child和:...-of-type的差异

用:empty区分空元素

伪对象选择器

总结

E[att^="val"]

偽類選擇器

關於:not()的用法

關於:nth-child()的用法

關於:...-child和:...-of-type的差異

用:empty區分空元素

偽物件選擇器

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題

关于`:not()`的用法

关于`:nth-child()`的用法

关于`:...-child`和`:...-of-type`的差异

用`:empty`区分空元素

關於`:not()`的用法

關於`:nth-child()`的用法

關於`:...-child`和`:...-of-type`的差異

用`:empty`區分空元素