• 選擇器
  • 簡單選擇器
    • 標簽選擇器
    • 類選擇器
    • id 選擇器
    • 通配符選擇器
    • 屬性選擇器
    • 偽類選擇器
  • 其他選擇器
    • 偽元素選擇器
    • 組合選擇器
    • 選擇器分組
  • 繼承、優(yōu)先、層級
    • 繼承
    • 優(yōu)先
      • 改變優(yōu)先級
    • 層疊

選擇器

See the Pen FEND_Selectors by Li Xinyang (@li-xinyang) on CodePen.

選擇器可被看做表達式，通過它可以選擇相應的元素并應用不同的樣式。

• 簡單選擇器
• 元素選擇器
• 組合選擇器

簡單選擇器

簡單選擇器可組合使用。

標簽選擇器

<div>
  <p>Sample Paragraph</p>
  <p>Sample Paragraph</p>
  <p>Sample Paragraph</p>
</div>

<style type="text/css">
  p {
    color: blue;
  }
</style>

類選擇器

.className 以 . 開頭，名稱可包含字母，數(shù)字，-，_，但必須以字母開頭。它區(qū)分大小寫并可出現(xiàn)多次。

<div>
  <p>Sample Paragraph</p>
  <p class="special bold">Sample Paragraph</p>
  <p>Sample Paragraph</p>
</div>

<style type="text/css">
  p {
    color: blue
  }
  .special {
    color: orange;
  }
  .bold {
    font-weight: bold;
  }
</style>

id 選擇器

#idName 以 # 開頭且只可出現(xiàn)一次，其命名要求于 .className 相同。

<div>
  <p id="special">Sample Paragraph</p>
</div>

<style type="text/css">
  #special {
    color: red;
  }
</style>

通配符選擇器

<div>
  <p>Sample Paragraph</p>
  <p>Sample Paragraph</p>
</div>

<style type="text/css">
  * {
    color: blue;
  }
</style>

屬性選擇器

[attr] 或 [attr=val] 來選擇相應的元素。#nav{...} 既等同于 [id=nav]{...}。IE7+

[attr~=val] 可選用與選擇包含 val 屬性值的元素，像class="title sports" 與 class="sports"。.sports{...} 既等同于 [class~=sports]{...} IE7+

[attr|=val] 可以選擇val開頭及開頭緊接-的屬性值。IE7+

[attr^=val] 可選擇以val開頭的屬性值對應的元素，如果值為符號或空格則需要使用引號 ""。IE7+

[attr$=val] 可選擇以val結尾的屬性值對應的元素。IE7+

[attr*=val] 可選擇以包含val屬性值對應的元素。IE7+

<div>
  <form action="">
    <input type="text" value="Xinyang" disabled>
    <input type="password" placeholder="Password">
    <input type="button" value="Button">
  </form>
</div>
<style type="text/css">
  [disabled] {
    background-color: orange;
  }
  [type=button] {
    color: blue;
  }
</style>

偽類選擇器

常用偽類選擇器：

• :link IE6+
• :visited IE7+
• :hover IE6中僅可用于鏈接
• :active IE6/7中僅可用于鏈接
• :enabled IE9+
• :disabled IE9+
• :checked IE9+
• :first-child IE8+
• :last-child IE9+
• :nth-child(even) 可為 odd even 或數(shù)字 IE9+
• :nth-last-child(n) n從 0 開始計算 IE9+
• :only-child 僅選擇唯一的元素 IE9+
• :only-of-type IE9+
• :first-of-type IE9+
• :last-of-type IE9+
• :nth-of-type(even) IE9+
• :nth-last-of-type(2n) IE9+

不常用偽類選擇器：

• :empty 選中頁面中無子元素的標簽 IE9+
• :root 選擇 HTML 根標簽 IE9+
• :not() 參數(shù)為一般選擇器 IE9+
• :target 被錨點選中的目標元素 IE9+
• :lang() 選中語言值為某類特殊值的元素 IE7+

NOTE：element:nth-of-type(n) 指父元素下第 n 個 element 元素，element:nth-child(n) 指父元素下第 n 個元素且元素為 element，若不是，選擇失敗。具體細節(jié)請在使用時查找文檔。

<div>
  <a  title="Sample Site">Sample Site</a>
</div>
<style type="text/css">
  /* 偽類屬性定義有順序要求！ */
  a:link {
    color: gray;
  }
  a:visited {
    color:red;
  }
  a:hover {
    color: green;
    /* 鼠標懸停 */
  }
  a:active {
    color: orange;
    /* 鼠標點擊 */
  }
</style>

其他選擇器

偽元素選擇器

注意與偽類學則器的區(qū)分。

• ::first-letter IE6+
• ::first-line IE6+
• ::before{content: "before"} 需與 content 一同使用 IE8+
• ::after{content: "after"} 需與 content 一同使用 IE8+
• ::selection 被用戶選中的內容（鼠標選擇高亮屬性）IE9+ Firefox需用 -moz 前綴

組合選擇器

• 后代選擇器 .main h2 {...}，使用 表示 IE6+
• 子選擇器 .main>h2 {...}，使用>表示 IE7+
• 兄弟選擇器 h2+p {...}，使用+表示 IE7+
  • h2~p {...}，使用~表示（此標簽無需緊鄰）IE7+

選擇器分組

<style type="text/css">
/* 下面兩組樣式聲明效果一致 */
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}

h1, h2, h3 {color: red;}
</style>

繼承、優(yōu)先、層級

繼承

子元素繼承父元素的樣式，但并不是所有屬性都是默認繼承的。通過文檔中的 inherited: yes 來判斷屬性是否可以自動繼承。

http://wiki.jikexueyuan.com/project/fend_note/images/C/css-inherit-doc.png" alt="" />

自動繼承屬性：

• color
• font
• text-align
• list-style
• ...

非繼承屬性：

• background
• border
• position
• ...

優(yōu)先

CSS Specificity Calculator 可以在這里找到。更多關于 CSS 優(yōu)先級別的信息可以在這里找到（英文）。

計算方法：

• a = 行內樣式
• b = id 選擇器的數(shù)量
• c = 類、偽類的屬性選擇器的數(shù)量
• d = 標簽選擇器和偽元素選擇器的數(shù)量

NOTE：從上到下優(yōu)先級一次降低，且優(yōu)先級高的樣式會將優(yōu)先級低的樣式覆蓋。大致公式（并不準確）如下。

value = a * 1000 + b * 100 + c * 10 + d

改變優(yōu)先級

• 改變樣式聲明先后順序
• 提升選擇器優(yōu)先級
• !important（慎用）

層疊

層疊為相同屬性根據優(yōu)先級覆蓋，如優(yōu)先級相同則后面會覆蓋前面的屬性，而不同屬性則會合并。