简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

CSS選擇器整理

高洛峰
發布： 2017-02-09 11:23:32
原創
1620 人瀏覽過

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

  • 元素選擇器

  • 關係選擇器

  • 屬性選擇器

  • 選擇器

    名稱
描述

*選擇指定的元素id選擇器選擇id屬性等於idName的元素CSS關係選擇器選擇器名稱描述子選擇器
配選擇器
#idName
.className 元素選擇器只要是寫都會常用，這一塊的內容非常簡單，沒什麼特別要說的。
E >F

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

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

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的前面插入的內容。用來和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中文網！

相關標籤：
css選擇器
來源：php.cn
上一篇：css3中user-select的用法詳解 下一篇：CSS3 transform 對HTML文檔流帶來的影響
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
更改時如何將鍵作為 v-for 的選擇選項值傳遞（VueJS） 我正在使用Vue3和Bootstrap5。我有一個select有多個選項。現在我正在顯示我的option.TEXT，當我更改某些內容時，這個value也將被傳遞到我的方法中。但當我...
來自於 2023-11-17 08:55:24
0
1
276
WordPress 6.0 (add_editor_style) 不會在古騰堡編輯器中載入 style.css 我正在學習UdemyWordPress課程來建立自訂WordPress區塊主題。我成功在function.php中註冊了區塊類型，並且可以在古騰堡編輯器中選擇我的區塊。教學建議使用...
來自於 2023-11-12 20:37:50
0
2
261
只選擇月份和年份的v-date-picker 請告訴我是否有其他方法可以使用v-date-picker來執行此操作。我只希望用戶能夠選擇年份和月份，然後日期選擇器選單應該關閉。這是我的html作為範例，但我不介意使用不同的程式...
來自於 2023-11-10 14:05:05
0
1
269
更新時阻止 MySQL 讀取 我有兩個簡單的查詢，一個是讀取表，一個是更新表。如何在更新查詢執行時間鎖定選擇查詢的讀取。現在在MySQLInnoDB中，我注意到寫入/更新預設是鎖定的，但讀取/選擇在事務之前取得...
來自於 2023-11-07 18:05:53
0
1
203
使用PHP取得CSV導出（MYSQL）的列名和數據 我需要一種透過PHP將MYSQL資料庫匯出到CSV的方法，但我還需要選擇列名稱。到目前為止，我有以下內容，除了獲取列名稱之外，它可以完成我需要的一切。 echo"Expo...
來自於 2023-11-04 21:59:58
0
2
279
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！