CSS學習摘要-語法和選擇器

主要摘自網路開發者。

從最基本的層次來看，CSS是由兩塊內容組合而成的：

• 屬性（Property）：一些人類可理解的標識符，這些標識符指出你想修改哪一些樣式，例如：字體，寬度，背景顏色等。
• 屬性值（Value）：每個指定的屬性都需要給定一個值，這個值表示你想把那些樣式特征修改成什麼樣，例如，你想把字體，寬度或背景顏色改成什麼。

與值配對的屬性被稱為CSS聲明，CSS聲明會被放置在一個CSS聲明塊中。最後，CSS聲明塊與選擇器相結合形成一個CSS規則集（或CSS規則）。

CSS 聲明

給 CSS 屬性設置特定的值是 CSS 語言的核心功能。
CSS 引擎會通過計算，將對應的 CSS 聲明應用到頁面的每一個元素上，從而使得元素們以適當的方式佈局，並展示出適當的樣式。

特別需要記住的是：

• CSS 的屬性和屬性值都是區分大小寫的。
• 屬性和屬性值之間，用英文半形冒號 (:) 隔離。

如下圖所示：

CSS 有超過300 個不同的屬性以及幾乎無窮無盡的屬性值。屬性和屬性值不能任意組合：每個屬性都有一個已經定義好的可用屬性值範圍。

重要: 如果使用了未知屬性，或者給屬性賦予了無效值，該聲明會被視為無效，瀏覽器的 CSS 引擎會完全忽略它。

重要: 在 CSS（和其他網路標準）中，使用美式拼寫作為單詞的標準寫法。例如，顏色（見於上述代碼所見）應始終拼寫為 color。寫成 colour會無法正常工作。

CSS 聲明塊

聲明按塊分組，每一組聲明都用一對大括弧包裹，用 ({) 開始，用 (}) 結束。

聲明塊里的每一個聲明必須用半形分號（;）分隔，否則代碼會不生效（至少不會按預期結果生效）。聲明塊里的最後一個聲明結束的地方，不需要加分號，但是最後加分號是個好習慣，因為可以防止在後續增加聲明時忘記加分號。

註意：塊有時候是可以嵌套的。這種情況下，每一對括弧必須邏輯上嵌套，跟嵌套 HTML 元素的標簽嵌套方式相同。最常見的例子是 @-rules，這是一種用 @ 標識開頭的塊。

例如 ：

@media

@font-face等。

註意：聲明塊的內容允許為空 —— 這完全有效。

CSS 選擇器和規則

我們的拼圖還少了一塊——我們需要討論一下如何告知我們的聲明塊：哪些元素是它們需要應用的。通過在每個聲明塊前加上選擇器（selector）來完成這一動作，選擇器是一種模式，它能在頁面上匹配一些元素。這將使相關的聲明僅被應用到被選擇的元素上。選擇器加上聲明塊被稱為規則集（ruleset），通常簡稱規則（rule）。

選擇器可以很複雜 —— 你可以製作一個匹配多種元素的規則，這是通過把多個選擇器囊括成用逗號分隔的選擇器（一組,）來達成；選擇器還可以被“鏈”在一起，例如我要選擇所有 class 是 "blah" 的元素, 但是當且僅當它在 <article> 元素里、並且僅當滑鼠指針懸停在這個元素上的時候。別擔心：隨著你在CSS上的經驗變的更豐富，事情會變的更清晰。

一個元素可以被多個選擇器所匹配，因此，一個給定的屬性可能被多個規則設置多次。 CSS 定義了哪個規則比其它規則更具優先順序，則更具優先順序的規則必定被應用：這被稱為層疊演算法（cascade algorithm），關於層疊演算法的更多內容和運作原理見層疊和繼承。

重要：如果鏈或組中的某個選擇器無效，比如使用了未知的偽元素或偽類，整個組的選擇器仍然是有效的，除了這個無效的將被忽略的選擇器。

CSS 語句（CSS statements）

CSS 規則是樣式表的主要組成塊 —— 是你在 CSS 中最常見的塊。但這有一些其它類型的塊，你以後偶爾會碰上 —— CSS 規則只是被稱為 CSS 語句中的一種。其它類型如下：

• @-規則(At-rules) 在CSS中被用來傳遞元數據、條件信息或其它描述性信息。它由（@）符號開始，緊跟著一個表明它是哪種規則的描述符，之後是這種規則的語法塊，並最終由一個半形分號（;）結束。每種由描述符定義的@-規則，都有其特有的內部語法和語義。一些例子如下：

  • @charset 和 @import （元數據）
  • @media 或 @document（條件信息，又被稱為嵌套語句，見下方。)
  • @font-face （描述性信息）具體語法示例：

  @import 'custom.css';

  該@-規則向當前 CSS 導入其它 CSS 文件
• 嵌套語句 是@-規則中的一種，它的語法是 CSS 規則的嵌套塊，只有在特定條件匹配時才會應用到文檔上。特定條件如下：
  • @media 只有在運行瀏覽器的設備匹配其表達條件時才會應用該@-規則的內容；
  • @supports關聯了一組嵌套的CSS語句,這些語句被放置在一個CSS區塊中,該區塊以大括弧分割, 還有一個由多個CSS聲明檢測組成的條件,它是一個鍵值組合, 由邏輯與,邏輯或,邏輯非組合而成. 這樣的條件語句稱為支持條件. 只有瀏覽器確實支持被測功能時才會應用該@-規則的內容；
  • @document只有當前頁面匹配一些條件時才會應用該@-規則的內容。

具體語法示例

@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}

上述的嵌套語句只有在頁面寬度超過801像素時才會應用。

重要：任何不是規則集或@-規則或嵌套語句的 CSS 語句都是無效的，並會因此被忽略。

語法之外：使 CSS 更具可讀性

正如你所見的，CSS 語法並不難寫：如果你寫了一些錯誤的規則，它將僅被忽略。但是，即使有這樣的機制，這也有一些值得瞭解的最佳實踐，使您的CSS代碼更易於使用和維護。

空格

空格實際上意味著一些空格，一些製表符以及一些新行。你可以通過添加空格使你的樣式表更具可讀性。

用與處理 HTML 的方式類似，瀏覽器會傾向於忽略你 CSS 中的許多空格；許多空格在那的意義僅僅是增加了可讀性。在下麵的第一個例子中，我們的每個聲明（以及規則的開始 / 結束）都在自己各自的行上 —— 這可以說是編寫 CSS 的好方法，因為它很容易維護和理解：

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p, #id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

你可以編寫跟這完全一樣的CSS，並移除大部分空格，它在功能上和第一個例子完全相同，但我確信你會同意這樣有些難讀：

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

你選擇的代碼佈局通常依據個人喜好，但當你開始在團隊中工作時，你可能會發現團隊已有自己的風格指南，約定了代碼編寫規範。

您在CSS中需要註意的空格是屬性和屬性值邊上的空格。例如，以下是有效的CSS：

margin: 0 auto;
padding-left: 10px;

但以下是無效的：

margin: 0auto;
padding- left: 10px;

因為 0auto 不被解析為 margin 屬性的有效值（0和auto是兩個單獨的值），並且瀏覽器不會將 padding- 解析為有效屬性。因此，你應該始終確保至少用一個空格分隔不同的值，且保持屬性名/值為一個連續的字元串。

註釋

與HTML一樣，我們鼓勵您在CSS中使用註釋，以幫助您在幾個月後遇上代碼時瞭解代碼如何工作，並幫助他人理解該代碼。它同樣對暫時註釋某些部分的代碼進行測試很有用，例如當您嘗試查找是代碼的哪一部分導致錯誤時。

CSS中的註釋以 /* 開始並以 */ 結束。

/* 基本元素樣式 */
/* -------------------------------------------------------------------------------------------- */
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  /* 特別指明全局字體大小，在大屏或大視窗下加大字體大小以增加可讀性 */
  body {font-size: 130%;}
}

h1 {font-size: 1.5em;}

/* 處理嵌套在DOM中的特定元素  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {background-color: red; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

簡寫

一些屬性比如 font，background，padding，border，和 margin 被稱為簡寫屬性 —— 這是由於它們允許你在一行設置多個屬性，從而節省時間並使代碼更整潔。

例如，像這行代碼：

/* 在padding和margin這樣的簡寫屬性中，值賦值的順序是top、right、bottom、left。 
   它們還有其他簡寫方式，例如給padding兩個值，則第一個值表示top/bottom，第二個值表示left/right */
padding: 10px 15px 15px 5px;

和以下的所有代碼做了相同的工作：

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

而這一行：

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

和以下這些做了相同的事：

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

我們不會試圖徹底全面地教導你這些東西 —— 你會在後續的課程中遇到很多例子，建議你通過簡寫屬性的名稱在我們的 CSS參考 中查找以瞭解更多信息。

深入選擇器

在CSS中，選擇器用於定位我們想要樣式化的網頁HTML元素。各種各樣可用的CSS選擇器允許我們精確選擇要樣式化的元素。

不同種類的CSS選擇器:

選擇器可以被分為以下類別：

• 簡單選擇器（Simple selectors) ：通過元素類型、class 或 id 匹配一個或多個元素。
• 屬性選擇器（Attribute selectors）：通過 屬性 / 屬性值 匹配一個或多個元素。
• 偽類（Pseudo-classes） ：匹配處於確定狀態的一個或多個元素，比如被滑鼠指針懸停的元素，或當前被選中或未選中的覆選框，或元素是DOM樹中一父節點的第一個子節點。
• 偽元素（Pseudo-elements）:匹配處於相關的確定位置的一個或多個元素，例如每個段落的第一個字，或者某個元素之前生成的內容。
• 組合器（Combinators）：這裡不僅僅是選擇器本身，還有以有效的方式組合兩個或更多的選擇器用於非常特定的選擇的方法。例如，你可以只選擇divs的直系子節點的段落，或者直接跟在headings後面的段落。
• 多用選擇器（Multiple selectors）：這些也不是單獨的選擇器；這個思路是將以逗號分隔開的多個選擇器放在一個CSS規則下麵， 以將一組聲明應用於由這些選擇器選擇的所有元素。

簡單選擇器

“簡單”選擇器，之所以這麼稱呼它是因為它們基於元素的類型（或其 class或id）直接匹配文檔的一個或多個元素。

類型選擇器（又名元素/標簽選擇器）

此選擇器只是一個選擇器名和指定的HTML元素名的不區分大小寫的匹配。這是選擇所有指定類型的最簡單方式。讓我們一起看看下麵這個例子:

這是HTML:

<p>What color do you like?</p>
<div>I like blue.</div>
<p>I prefer red!</p>

這是樣式表:

/* All p elements are red */
p {
  color: red;
}

/* All div elements are blue */
div {
  color: blue;
}

我們將得到這個：

類選擇器

類選擇器由一個點“.”以及類後面的類名組成。類名是在HTML class文檔元素屬性中沒有空格的任何值。由你自己選擇一個名字。同樣值得一提的是，文檔中的多個元素可以具有相同的類名，而單個元素可以有多個類名(以空格分開多個類名的形式書寫)。以下是一個簡單的例子：

這是一些HTML：

<ul>
  <li class="first done">Create an HTML document</li>
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

這是一些CSS樣式:

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}

/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

我們得到這樣一個結果:

例：處理多個類

html代碼：

<p class="base-box warning important">My first paragraph.</p>

<p class="base-box editor-note">My second paragraph.</p>

<p class="base-box ">My third paragraph</p>

css樣式：

.base-box {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
  padding: 3px 3px 3px 7px;
}

.important {
  font-weight: bold;
}

.editor-note {
  background-color: #9999ff;
  border-left: 6px solid #333399;
}

.warning {
  background-color: #ff9999;
  border-left: 6px solid #993333;
}

頁面效果：

ID 選擇器

ID選擇器由哈希/磅符號 (#)組成，後面是給定元素的ID名稱。 任何元素都可以使用id屬性設置唯一的ID名稱。 由你自己選擇的ID是什麼。 這是選擇單個元素的最有效的方式。

重要提示：一個ID名稱必須在文件中是唯一的。關於重覆ID的行為是不可預測的，比如在一些瀏覽器只是第一個實例計算，其餘的將被忽略。

我們來看一個簡單的例子 - 這是HTML：

<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>

這是樣式表：

#polite {
  font-family: cursive;
}

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

而我們得到這個作為輸出：

例：冠亞季軍對應金銀銅三色

基於相關ID的CSS選擇器規則，使冠軍、亞軍、季軍顯示對應的金、銀、銅三種顏色。

html代碼：

<p id="first"><strong>Winner</strong>: Velma Victory</p>
<p id="second"><strong>2nd</strong>: Colin Contender</p>
<p id="third"><strong>3rd</strong>: Phoebe Player</p>

css樣式：

p {
  text-transform: uppercase;
  padding: 5px;
}

#first {
  background-color: goldenrod;
}

#second {
  background-color: silver;
}

#third {
  background-color: #CD7F32;
}

頁面效果如圖：

通用選擇器

通用選擇（*）是最終的王牌。它允許選擇在一個頁面中的所有元素。由於給每個元素應用同樣的規則幾乎沒有什麼實際價值，更常見的做法是與其他選擇器結合使用(參考下麵 組合）

重要提示：使用通用選擇時小心。因為它適用於所有的元素，在大型網頁利用它可以對性能有明顯的影響：網頁可以顯示比預期要慢。大多數情況下，你都不會使用這個選擇器。

例如，這是HTML：

<div>
  <p>I think the containing box just needed
  a <strong>border</strong> or <em>something</em>,
  but this is getting <strong>out of hand</strong>!</p>
</div>

這是樣式表：

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

組合在一起，會得到這樣的結果：

另：通用（通配符*）選擇器還常見於用來消除預設樣式，一 般是消除預設的外邊距和內邊距。因為預設樣式比較醜且有可能影響到css後的一些佈局。

如以下css代碼也不算少見:

* {
  margin: 0;
  padding: 0:
}

簡單（基本）選擇器總結

簡單（基本）選擇器包含：

• 1.元素（標簽）選擇器（共性）
  • 元素選擇器可以選中所有的標簽元素，比如div，ul，li ，p等等，不管標簽藏的多深，都能選中，而且選中的是頁面上所有的，而不是單獨的某一個，所以說它具有的是 "共性" 而不是 ”特性“。
• 2.ID選擇器（#）
  • 同一個頁面中id不要有重覆（規範）；
  • 任何的標簽元素都可以額外設置ID；
  • ID命名要規範（字母，數字，下劃線），大小寫敏感（嚴格區分大小寫）；
• 3.類選擇器（class）
  • 所謂類就是class，class與id非常相似；
  • 同樣是任何的標簽元素都可以添加上類名，不同於ID是不同標識，class是可以重覆相同的命名；
  • 相同的類名，用於替元素，對象歸類；
  • 同一個標簽中可以攜帶多個類，分別用空格隔開。
  • 每個類儘可能的小，有公共（共有屬性）的概念，能夠讓更多的標簽使用上，減少重覆代碼（css樣式）；
  • 玩好了類，等於玩好了2分之1css。
  • 相比使用id，要儘可能的使用class，因為id一般是用於Js當選擇的，而class用於css當選擇居多。

屬性選擇器

屬性選擇器是一種特殊類型的選擇器，它根據元素的 屬性和屬性值來匹配元素。它們的通用語法由方括弧([]) 組成，其中包含屬性名稱，後跟可選條件以匹配屬性的值。 屬性選擇器可以根據其匹配屬性值的方式分為兩類： 存在和值屬性選擇器和子串值屬性選擇器。

存在和值（Presence and value）屬性選擇器

這些屬性選擇器嘗試匹配精確的屬性值：

• [attr]：該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。
• [attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。
• [attr~=val]：該選擇器僅選擇 attr 屬性的值（以空格間隔出多個值）中有包含 val 值的所有元素，比如位於被空格分隔的多個類（class）中的一個類。

讓我們看一個以下麵的HTML代碼片段為例：

我的食譜配料: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

和一個簡單的樣式表：

/* 
    具有"data-vegetable"屬性的所有元素,
    將被給予綠色的文本顏色
*/
[data-vegetable] {
  color: green
}

/* 
    具有"data-vegetable"屬性且屬性值剛好是"liquid"的所有元素，
    將被給予金色背景顏色 
*/
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* 
    具有"data-vegetable"屬性且屬性值包含"spicy"的所有元素，
    即使某元素的該屬性還包含其他屬性值，
    都會被給予紅色的文本顏色 
*/
[data-vegetable~="spicy"] {
  color: red;
}

結果如下：

筆記：本例中的 data-* 屬性被稱為 數據屬性。它們提供了一種在HTML屬性中存儲自定義數據的方法，由此，這些數據可以輕鬆地被提取和使用。有關詳細信息，請參閱 如何使用數據屬性。

子串值（Substring value）屬性選擇器

這種情況的屬性選擇器也被稱為“偽正則選擇器”，因為它們提供類似 regular expression 的靈活匹配方式（但請註意，這些選擇器並不是真正的正則表達式）：

• [attr|=val] : 選擇attr屬性的值是 val 或值以 val- 開頭的元素（-用來處理語言編碼）。
• [attr^=val] : 選擇attr屬性的值以val開頭（包括 val）的元素。
• [attr$=val] : 選擇attr屬性的值以val結尾（包括 val）的元素。
• [attr*=val] : 選擇attr屬性的值中包含字元串 val 的元素。

讓我們繼續我們前面的例子，並添加以下CSS規則：

/* 語言選擇的經典用法 */
[lang|="fr"] {
  font-weight: bold;
}

/* 
    具有"data-vegetable"屬性含有值"not spicy"的所有元素,都變回綠色
*/
[data-vegetable*="not spicy"] {
  color: green;
}

/* 
   具有"data-quantity"屬性其值以"kg"結尾的所有元素*/
[data-quantity$="kg"] {
  font-weight: bold;
}

/* 
   具有屬性"data-quantity"其值以"optional"開頭的所有元素 
*/
[data-quantity^="optional"] {
  opacity: 0.5;
}

有了這些新的規則，我們會得到這個：

例： 給足球比賽結果添加樣式

<ol>
  <li lang="en-GB" data-perf="inc-pro">Manchester United</li>
  <li lang="es" data-perf="same-pro">Barcelona</li>
  <li lang="de" data-perf="dec">Bayern Munich</li>
  <li lang="es" data-perf="same">Real Madrid</li>
  <li lang="de" data-perf="inc-rel">Borussia Dortmund</li>
  <li lang="en-GB" data-perf="dec-rel">Southampton FC</li>
</ol>

添加屬性選擇器到一些規則來創建一個簡單的足球結果列表。 這裡有三件事要做：

• 前三個規則分別在列表項的左側添加英國，德國和西班牙國旗圖標。 您需要填寫適當的屬性選擇器，以便團隊獲得正確的國家標誌，並配合語言。
• 規則4-6在列表項中添加背景顏色，以指示球隊是否已經在聯盟中升格（綠色，rgba（0,255,0,0.7）），向下（紅色，rgba（255,0,0,0.5）） ），或者留在同一個地方（藍色，rgba（0,0,255,0.5））。填寫適當的屬性選擇器，以將正確的顏色與正確的隊列匹配，並與inc，相同和dec字元串匹配 data-perf屬性值。
• 規則7-8使得晉級的球隊變得加粗，有降級危險的球隊為斜體和灰色。 填寫適當的屬性選擇器，將這些樣式與正確的隊列進行匹配，並與data-perf屬性值中顯示的pro和rel字元串進行匹配。

li[lang="en-GB"] {
   background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/en-GB.png") 5px center no-repeat;
}

li[lang="de"] {
   background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/de.png") 5px center no-repeat;
}

li[lang="es"] {
   background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/es.png") 5px center no-repeat;
}

li[data-perf*="inc"] {
   background-color: rgba(0,255,0,0.7);
}

li[data-perf*="same"] {
   background-color: rgba(0,0,255,0.5);
}

li[data-perf*="dec"] {
   background-color: rgba(255,0,0,0.7);
}

li[data-perf*="pro"] {
   font-weight: bold;
}

li[data-perf*="rel"] {
   font-style: italic;
   color: #666;
}

ol {
   padding: 0;
}

li {
   padding: 3px 3px 3px 34px;
   margin-bottom: 5px;
   list-style-position: inside;
}

效果如圖：

偽類和偽元素選擇器

偽選擇器不是選擇元素，而是元素的某些部分，或僅在某些特定上下文中存在的元素。它們有兩種主要類型 ： 偽類和偽元素。

偽類（Pseudo-class）

一個 CSS 偽類（pseudo-class）是一個以冒號(:)作為首碼的關鍵字，當你希望樣式在特定狀態下才被呈現到指定的元素時，你可以往元素的選擇器後面加上對應的偽類（pseudo-class）。你可能希望某個元素在處於某種狀態下呈現另一種樣式，例如當滑鼠懸停在元素上面時，或者當一個覆選框被禁用或被勾選時，又或者當一個元素是它在 DOM 樹中父元素的第一個孩子元素時。

• :active
• :any
• :checked
• :default
• :dir()
• :disabled
• :empty
• :enabled
• :first
• :first-child
• :first-of-type
• :fullscreen
• :focus
• :hover
• :indeterminate
• :in-range
• :invalid
• :lang()
• :last-child
• :last-of-type
• :left
• :link
• :not()
• :nth-child()
• :nth-last-child()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :read-only
• :read-write
• :required
• :right
• :root
• :scope
• :target
• :valid
• :visited

我們不會立馬深入講解每一個偽類（pseudo-class），在學習領域中，詳盡無遺地教給你每一件事不是目的。在適當的時候，你會更加詳盡的瞭解一些內容。

一個偽類（Pseudo-class）的例子

現在，讓我們來看一個簡單的使用例子。首先是一個 HTML 片段：

<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>

然後，一些 CSS 樣式：

/* 這些樣式將在任何情況下應用於我們
的鏈接 */

a {
  color: blue;
  font-weight: bold;
}

/* 我們想讓被訪問過的鏈接和未被訪問
的鏈接看起來一樣 */

a:visited {
  color: blue;
}

/* 當游標懸停於鏈接，鍵盤激活或鎖定
鏈接時，我們讓鏈接呈現高亮 */

a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

現在，我們可以跟修改了樣式的鏈接愉快地玩耍了！

例：一個條紋狀的信息列表

為信息列表增加條紋狀效果，然後增加合適的偽類使得裡面的鏈接在滑鼠經過時顯得不同。

1. 使用偽類 a：hover 實現懸停樣式。
2. 對於條紋狀效果，你需要用到一個偽類，如:nth-of-type()，通過給那兩個顏色規則添加稍微不同的偽類，使得列表的奇數行和偶數行有著不同的樣式效果。

<ul>
  <li><a href="#">United Kingdom</a></li>
  <li><a href="#">Germany</a></li>
  <li><a href="#">Finland</a></li>
  <li><a href="#">Russia</a></li>
  <li><a href="#">Spain</a></li>
  <li><a href="#">Poland</a></li>
</ul>

ul {
  padding: 0;
}

li {
  padding: 3px;
  margin-bottom: 5px;
  list-style-type: none;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: underline;
  color: red;
}

li:nth-of-type(2n) {
  background-color: #ccc;
}

li:nth-of-type(2n+1) {
  background-color: #eee;
}

效果如圖：

偽元素

偽元素（Pseudo-element）跟偽類很像，但它們又有不同的地方。它們都是關鍵字，但這次偽元素首碼是兩個冒號 (::) ， 同樣是添加到選擇器後面去選擇某個元素的某個部分。

• ::after
• ::before
• ::first-letter
• ::first-line