CSS3 - 選擇器

weixin_34146805發表於2016-12-16
CSSS3

一、 前言

CSS3的理念就是模組化，其中最重要的模組有：

  • 選擇器
  • 框模型
  • 背景和邊框
  • 文字效果
  • 2D/3D轉換
  • 動畫
  • 多列布局
  • 使用者介面

今天，我們要討論的就是其中的選擇器這個模組。

用好選擇器可以大幅度提升WEB開發人員在書寫和修改樣式表時的工作效率。大多數情況下我們要對樣式表進行修改時都會使用class或者id屬性，而這些屬性是沒有任何語義的，僅僅只是用來為css樣式服務，屬於多餘屬性。當這些沒有語義的屬性充斥在整個html結構中時，是非常混亂的，對於我們自身修改也很不方便。

在CSS3中，提倡使用選擇器將樣式和元素直接繫結起來，這樣在樣式表中什麼樣式與什麼元素相匹配變的一目瞭然，修改起來也方便。

不僅如此，通過選擇器還可以實現各種複雜的指定，同時也能大量減少樣式表程式碼的書寫量，最終書寫出來的樣式表也會變得簡潔明瞭。

下面，讓我們進入CSS3選擇器的世界。

二、 選擇器分類

CSS3的選擇器總體上可以分為4類：

  • 屬性選擇器
  • 結構偽類選擇器
  • UI偽類選擇器
  • 其他選擇器

每一類選擇器所承擔的主要職責都是不一樣的，在正文中我會對它們做詳細的介紹。

三、 正文

1、 屬性選擇器
  • markdown表格中 ‘ | ’ 用 ‘ / ’ 代替，否則會引起表格混亂，如果大家有解決辦法，請留言告知
  • 正確的舉例用 ' Y ' 表示
  • 錯誤的舉例用 ‘ N ’ 表示

注意，當省略E選擇符的時候，代表匹配任意元素。

屬性選擇器 作用 舉例
E[foo] 選擇匹配E的元素，且該元素定義了foo屬性 <div foo="xx">
E[foo="bar"] 選擇匹配E的元素，且該元素定義了foo屬性值為"bar" <div foo="bar"> Y
<div foo="ba"> N
E[foo~="bar"] 選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值是一個以空格符分隔的列表 <div foo="bar"> Y
<div foo="me bar"> Y
<div foo="bar-me"> N
E[foo/="en"] 選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值是一個以連字元( - )分隔的列表 <div foo="en"> Y
<div foo="en-cn"> Y
<div foo="en cn"> N
E[foo^="bar"] 選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值必須以"bar"作為開頭 <div foo="bar"> Y
<div foo="barq"> Y
<div foo="bar q"> Y
<div foo="bar-q"> Y
<div foo="qbar"> N
E[foo$="jpg"] 選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值必須以"jpg"作為結尾 <div foo="jpg"> Y
<div foo="ajpg"> Y
<div foo="a-jpg"> Y
<div foo="jpe"> N
E[foo*="bar"] 選擇匹配E的元素，且該元素定義了foo屬性，foo屬性值在任意位置包含"bar"字串即可 <div foo="bar"> Y
<div foo="aabar"> Y
<div foo="abarz"> Y
<div foo="aa-bar"> Y
<div foo="barqq"> Y
<div foo="bar aa"> Y
<div foo="zbaar"> N
2、 結構偽類選擇器
結構偽類選擇器 作用 舉例
E:root 匹配E所在文件的根元素，在html文件中，根元素就是html元素 <html></html>
E:nth-child(n) 選擇所有在其父元素中第n個位置的匹配E的子元素，
引數n可以是數字(1、2、 3)、關鍵字(odd、even)和公式(2n、2n+3)，
公式n的起始值是0，數字n的起始值是1		 …………
E:nth-last-child(n) 選擇所有在其父元素中倒數第n個位置的匹配E的子元素，
該選擇器與E:nth-child(n) 是計算相反順序額選擇器，語法和用法相同		 …………
E:nth-of-type(n) 選擇所有在其父元素中同型別第n個位置的匹配E的子元素，
注意，所有匹配E的子元素被分離出來單獨排序，非E子元素不參與排序，
引數n可以是數字(1、2、 3)、關鍵字(odd、even)和公式(2n、2n+3)，
公式n的起始值是0，數字n的起始值是1		 …………
E:nth-last-of-type(n) 選擇所有在其父元素中同型別倒數第n個位置的匹配E的子元素，
該選擇器與E:nth-of-type(n)是計算順序相反的選擇器，語法和用法相同		 …………
E:first-child 選擇位於其父元素中第一個位置，且匹配E的子元素 …………
E:last-child 選擇位於其父元素中最後一個位置，且匹配E的子元素 …………
E:only-child 選擇其父元素只包含一個子元素，且該子元素匹配E …………
E:first-of-type 選擇在其父元素中匹配E的第一個同型別的子元素 …………
E:last-of-type 選擇在其父元素中匹配E的最後一個同型別的子元素 …………
E:only-of-type 選擇在其父元素只包含一個同型別子元素，且該子元素匹配E …………
E:first-letter 選擇每個E元素的首字母 …………
E:first-line 選擇每個E元素的第一行 …………
E:before 在每個E元素的內容之前插入內容 …………
E:after 在每個E元素內容之後插入內容 …………
E:empty 選擇匹配E的元素，且該元素不包含節點，
注意，文字也屬於節點		 …………
3、 UI偽類選擇器
UI偽類選擇器 作用 舉例
a:link 選擇所有未被訪問的a連結 …………
a:visited 選擇所有已經被訪問的a連結 …………
a:active 選擇活動連結(即滑鼠點下去沒有鬆開的時候) …………
a:hover 選擇滑鼠指標位於其上的a連結 …………
E:focus 選擇獲得焦點的E元素(所有使用者可以輸入的元素都有焦點) …………
E:enabled 選擇可以輸入的E元素(所有使用者可以輸入的元素都有enable屬性) …………
E:disabled 選擇禁止輸入的E元素(所有使用者可以輸入的元素都有disabled屬性) …………
input:checked 選擇radio和checkbox中被選中的input元素(只有rhttp://www.w3school.com.cn/cssref/css_selectors.aspadio和checkbox有該選擇器) ……………
4、 其他偽類選擇器
其他偽類選擇器 作用 舉例
E:not(s) 否定偽類選擇器型別，選擇匹配E的所有元素，並且過濾掉匹配s選擇符的所有元素 …………
E::selection 匹配使用者選擇的E元素 …………
E:target 目標偽類選擇器型別，選擇匹配E的所有元素，且匹配元素被相關URL指向 …………

四、 結束語

本文對CSS3選擇器模組進行了分類梳理，因為比較簡單，所以並沒有寫例子來驗證，大家只要多多練習，一定可以熟練的掌握好這些選擇器，提升我們的編寫CSS樣式的水平，真正做到結構、樣式以及行為三者分離。

最後，附上W3C選擇器模組詳細介紹，大家可以去上面多多練習。
http://www.w3school.com.cn/cssref/css_selectors.asp

相關文章