css選擇器

css選擇器用法較多,不經常使用的選擇器容易遺忘,因而在這裏整理出css選擇器的基本用法,以備查用。css

基本選擇器

  • *: 通配符,匹配任何元素html

    例:* { color: red }app

  • #id: id 選擇器this

    例:匹配全部 id 屬性爲 app 的元素spa

    #app { color: red }code

  • .class: class 選擇器htm

    匹配全部 class 屬性爲 btn 的元素繼承

    例:.btn { color: red }element

  • element: 元素選擇器文檔

    匹配全部 div 標籤

    例:div { color: red }

屬性選擇器

HTML:

<div title="myBtn Button" lang="en-us" />
複製代碼

CSS 2.1

  • [attribute]: 匹配全部帶有 attribute 屬性的元素

    [title] { color: red; }

  • [attribute="x"]: 匹配全部 attribute 屬性爲 x 的元素

    [title=myBtn] { color: red; }

  • [attribute~="x"]: 匹配全部 attribute 屬性具備多個空格分隔的值,其中一個值等於 x 的元素

    [title~="Button"] { color: red; }

  • [attribute|="x"]: 匹配全部 attribute 屬性具備連字符-分隔的值,其中一個值以 x 開頭的元素

    [lang|="en"] { color: red; }

CSS 3

  • [attribute^="x"]: 匹配屬性 attribute 的值以 x 開頭的元素

    [title^=my] { color: red; }

  • [attribute$="x"]: 匹配屬性 attribute 的值以 x 結尾的元素

    [title$=Button] { color: red; }

  • [attribute*="x"]: 匹配屬性 attribute 的值包含 x 的元素

    [title*=Btn] { color: red; }

僞類選擇器

HTML:

<div>
  <a lang="en" href="http://xinghunm.com" target="_blank">Xinghunm.com</a>
</div>
複製代碼

CSS 2.1

如下的 E、F 指 selector 匹配到的元素,其自己就是 selector。

  • E:first-child: 匹配元素 E 當它是其父元素的第一個子元素

    a:first-child { color: red; }

  • E:link: 匹配未被訪問(未點擊或跳轉)的連接

    a:link { color: black; }

  • E:visited: 匹配已訪問過的連接

    a:visited { color: green; }

  • E:hover: 匹配鼠標懸停其上的元素

    :hover必須在:link:visited 以後才能看到效果。

    a:hover { color: blue; }

  • E:active: 匹配鼠標按下還未擡起的元素

    :active必須在:hover以後才能看到效果。

    a:active { color: red; }

  • E:focus: 匹配獲取當前焦點的元素

    a:focus { color: yellow; }

  • E:lang(x): 匹配 lang 屬性等於 x 的元素

    a:lang(en) { color: red; }

CSS 3

HTML:

<div>
      <h1>this is h1</h1>
      <h3>first-of-type h3</h3>
      <h3>last-of-type h3</h3>
      <ul>
          <li><a href="#tab1">tab1</a></li>
          <li><a href="#tab2">tab2</a></li>
      </ul>
      <div id="tab1">this is tab1</div>
      <div id="tab2">this is tab2</div>
      <p><span>only child</span></p>
      <p></p>
      <input id="input1" />
      <input id="input2" disabled="disable" />
      <input id="input3" type="checkbox" />
  </div>
複製代碼
  • E:target: URL 後跟錨點#,指向文檔內某個具體的元素,這個被連接的元素就是目標元素,E:target選 擇器用於選取當前活動的目標元素 當咱們點擊列表 tab1 時,由於其錨點連接的元素就是 id 爲 tab1 的元素,因此此時活動的目標元素就是 id 爲 tab1 的 div,經過 div:target 就能夠獲取此目標元素。

    div:target { background: red; }

  • :not(selector): 匹配與 selector 選擇器描述不相符的元素

    div :not(div) { color: red; }

  • E:enabled: 匹配表單中激活的元素

    #input1:enabled { background: red; }

  • E:disabled: 匹配表單中禁用的元素

    #input2:disabled { background: black; }

  • E:checked: 匹配表單中被選中的 radio(單選框)或 checkbox(複選框)

    #input3:checked { margin: 20px; }

CSS3 結構性僞類

  • :root: 匹配根元素,對應 HTML 文檔就是 html 元素

    :root { color: red; }

  • E:nth-child(n): 匹配元素 E 當它是其父元素的第 n(從 1 開始)個子元素 列表 tab1 是其父元素 ul 的第一個元素,所以能夠匹配到列表 tab1

    li:nth-child(1) { color: red; }

  • E:nth-last-child(n): 匹配元素 E 當它是其父元素的倒數第 n(從 1 開始)個子元素 列表 tab2 是其父元素 ul 的倒數第一個子元素,所以能夠匹配到列表 tab2

    li:nth-last-child(1) { color: red; }

  • E:last-child: 匹配元素 E 當它是其父元素的倒數第 1 個子元素

    li:last-child() { color: red; }

  • E:only-child: 匹配元素 E 當它是其父元素的惟一一個子元素

    span:only-child() { color: red; }

  • E:nth-of-type(n): 匹配元素 E 當它是其父元素的第 n(從 1 開始)個出現的與 E 類型相同的子元素

    匹配<div id="tab2">this is tab2</div>

    div:nth-of-type(2) { color: red; }

  • E:nth-last-of-type(n): 匹配元素 E 當它是其父元素的倒數第 n(從 1 開始)個出現的與 E 類型相同的子元素

    匹配<div id="tab1">this is tab1</div>

    div:nth-last-of-type(2) { color: red; }

  • E:first-of-type: 匹配元素 E 當它是其父元素的第 1 個出現的與 E 類型相同的元素子元素(可能有多個)

    h3:first-of-type { color: red; }

  • E:last-of-type: 匹配元素 E 當它是其父元素的倒數第 1 個出現的與 E 類型相同的元素子元素(可能有多個)

    h3:last-of-type { color: red; }

  • E:only-of-type: 匹配元素 E 當它是其父元素下惟一一個 E 類型的元素

    h1:only-of-type { color: red; }

  • E:empty: 匹配元素 E 當沒有子元素或內容時

    p:empty{ color: red; }

僞元素選擇器

HTML:

<div>
   <p>12<br>34</p>
 </div>
複製代碼

CSS 2.1

  • ::first-line: 匹配元素的第一行

    p::first-line { color: red; }

  • ::first-letter: 匹配元素的第一個字母

    p::first-letter { color: red; }

  • ::before: 在元素前經過 content 屬性插入內容

    p::before { content: "*"; }

  • ::after: 在元素後經過 content 屬性插入內容

    p::after { content: "*"; }

CSS 3

  • ::selection: 匹配鼠標框選的元素

    ::selection { color: red; }

多級選擇器

HTML:

<div id="div1">
      <div id="div2">
        <h1>this is dev2 > h1</h1>
        <h2>this is dev2 > h2</h2>
      </div>
       <div id="div3">this is dev3</div>
       <div id="div4">this is dev4</div>
       <h1>this is div1 > h1</h1>
    </div>
複製代碼
  • E, F: 多元素選擇器,同時匹配 E 元素和 F 元素

    h1, h2 { color: red; }

  • E > F: 子元素選擇器,匹配 E 元素的子元素 F

    #div2 > h1 { color: red; }

  • E F: 後代元素選擇器,匹配 E 元素的後代元素 F

    #div1 h2 { color: red; }

  • E + F: 相鄰元素選擇器,匹配全部緊隨 E 元素以後的 F 元素 匹配 div3

    #div2 + div { color: red; }

  • E ~ F: 同級元素選擇器,匹配全部 E 元素以後的同級元素 F 匹配 div3,div4

    #div2 ~ div { color: red; }

優先級

!important > 行內樣式 > ID > 類、僞類、屬性 > 元素、僞元素 > 繼承 > 通配符

相關文章
相關標籤/搜索