跳轉至內容

層疊樣式表/選擇器

來自華夏公益教科書，開放世界開放書籍

在 CSS 中，選擇器 是規則中第一個 "{" 之前的部分，例如規則 " p { font-weight:bold; } " 中的 "p"。選擇器透過指定元素的型別（例如 "div"），元素的類或元素的 id 來指定規則應該應用於哪些元素。選擇器只能在連結和嵌入式 CSS 中使用，不能在內聯 CSS 中使用。

下表概述了選擇器。以下各節將詳細討論每種型別的選擇器。

選擇器概述
選擇器型別 示例選擇器 示例規則
型別 div div { margin:7px; padding:7px; }
類 .important .important { font-weight:bold; color:red; }
ID #onlyThisOne #onlyThisOne { font-family:courier; }
通用 * * { color:green; }
偽類 a:link a:link { color:blue; }
偽元素 p:first-letter p:first-letter { color:red }
後代 td span td span { font-weight:bold; }
分組 h1, h2, h3 h1, h2, h3 { text-align:center; }

型別

[編輯 | 編輯原始碼]

這些選擇器根據元素型別的名稱匹配元素。上面的示例使用型別選擇器使每個 p 例項都具有粗體文字。您可以將型別選擇器與任何元素一起使用。以下是一些示例

 div{
   margin:7px;
   padding:7px;
 }

 body{
   background-image:url("image.gif");
   font-size:.9em;
 }

類

[編輯 | 編輯原始碼]

類選擇器與 (X)HTML 文件一起使用。它不適用於一般的 XML 文件，除非使用者代理（Web 瀏覽器或其他文件閱讀器）可以確定文件中元素的哪個屬性是類屬性。在 (X)HTML 文件中，class 被定義為類屬性。

HTML 允許所有在 HTML 文件主體部分中有效的元素使用 class 屬性，包括 body 元素本身。這允許 Web 設計師區分在不同上下文中使用的相同型別的元素。例如，設計師可以區分 HTML 文件中的 HTML 元素和 HTML 屬性。

 The <code class="attribute">alt</code> attribute of the <code class="element">img</code>

類選擇器允許您根據元素的類應用 CSS 規則。

第一種方法是建立一個全域性類，可以將其新增到任何元素。您這樣操作：

 .important {
   font-weight:bold; color:red;
 }

這將使任何具有 important 類的元素都變為粗體和紅色。

示例 HTML

 <p class="important">Important Text</p>
 <p>Ordinary Text</p>
 <div class="important">Important Footnote</div>

示例渲染

重要文字

普通文字

重要腳註

第二種方法是將其附加到型別選擇器。該規則僅應用於指定類別的給定型別的元素。

CSS 規則

 p.right {
   float:right;
   clear:both
 }

示例 HTML

 <p class="right">Righty Righty</p>

示例渲染（向右看）

對對對


一個元素可能屬於多個類，例如：

 <p class="right">This paragraph belongs to the class 'right'.</p>
 <p class="important">This paragraph belongs to the class 'important'.</p>
 <p class="right important">This paragraph belongs to both classes.</p>

示例渲染

本段屬於“right”類。

本段屬於“important”類。

本段同時屬於這兩個類。


類名應描述類的目的，例如 important，而不是類的效果，例如 red。如果您按效果命名類，然後改變您想要的外觀，您可能會遇到類似以下規則的情況：

 .red {color:blue}

如有必要，可以使用多個類選擇器僅選擇屬於所有指定類的元素，例如：

p.important.right {
  border: 2px dashed #666
}

示例渲染

本段屬於“right”類。

本段屬於“important”類。

本段同時屬於這兩個類。


Internet Explorer 6 錯誤

[編輯 | 編輯原始碼]

前例中所示的多個類選擇器在 Internet Explorer 6 中不起作用。它將選擇器視為僅存在最後一個類選擇器，例如 p.important.right 被視為等效於 p.right。

在 Internet Explorer 6 中渲染的上述示例

本段屬於“right”類。

本段屬於“important”類。

本段同時屬於這兩個類。


完整的 HTML 文件和 CSS 樣式表用於測試此錯誤，如下所示。

classBug.css

.important {
  font-weight:bold; color:red;
}

p.right {
  float:right;
  clear:both
}

p.important.right {
  border: 2px dashed #666
}

classBug.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
    <title>IE6 multiple class bug</title>
    <link rel="stylesheet" type="text/css" href="classBug.css">
  </head>
  <body>
    <p class="right">This paragraph belongs to the class 'right'.</p>
    <p class="important">This paragraph belongs to the class 'important'.</p>
    <p class="right important">This paragraph belongs to both classes.</p>
  </body>
</html>

ID

[編輯 | 編輯原始碼]

ID 選擇器與 (X)HTML 文件一起使用。它不適用於一般的 XML 文件，除非使用者代理（Web 瀏覽器或其他文件閱讀器）可以確定文件中元素的哪個屬性是 ID 屬性。在 (X)HTML 文件中，id 被定義為 ID 屬性。

ID 選擇器用於選擇頁面上的單個專案。它匹配元素的 id 屬性。同一頁面上的兩個元素不能具有相同的 id 屬性。

但是，同一站點內的幾個不同網頁可能會重複使用 id。它通常用於頁面的主要部分，例如 mainContent、navigationBar。它通常與後代選擇器結合使用，例如，對導航欄中的所有列表項進行樣式化，而不會影響主要內容中的列表。

CSS 規則

 #onlyThisOne {
   font-family:courier;
 }

示例 HTML

 <p id="onlyThisOne">Courier</p>

示例渲染

Courier

通用

[編輯 | 編輯原始碼]

這些選擇器將樣式應用於頁面上的所有專案。例如，要使頁面上的所有文字都變成綠色，請使用以下規則：

 * {
   color:green;
 }

偽類

[編輯 | 編輯原始碼]

偽類和偽元素允許元素根據文件樹中元素的位置以外的資訊進行格式化。在 CSS1 和 CSS2.1 中，偽類和偽元素選擇器以冒號 : 為字首。在 CSS3 中，偽元素以 :: 為字首。

CSS 級別 1 定義了三個偽類

連結
未訪問的連結
已訪問
已訪問的連結
活動
活動連結

這些只能應用於錨點 (a) 元素。

 a:link{
   color:blue;
 }

 a:visited{
   color:purple;
 }

 a:active{
   color:red;
 }

CSS 級別 2.1 引入了幾個額外的偽類，包括 hover。hover 可用於建立懸停效果，無需使用 Javascript。CSS2.1 還允許 active 應用於任何可以啟用的元素，例如按鈕。

其他 CSS 2.1 偽類是

first-child
匹配任何作為其父元素的第一個子元素的元素。
lang(...)
匹配元素的語言。語言可以直接設定在元素上，也可以從祖先元素繼承。有效的語言程式碼必須出現在括號中，例如 en 用於任何變體的英語，或 en-gb 用於英國英語。
懸停
當用戶將滑鼠懸停在元素上時應用。
活動
現在允許在任何能夠“活動”的元素上使用 – 當元素處於活動狀態時應用。
聚焦
當元素獲得鍵盤焦點時應用。

雖然 CSS2.1 允許在任何元素上使用 hover，但 Internet Explorer 僅允許在錨點元素上使用。

示例

  p:first-child {
    font-size:120%
  }

  span:lang(la) { /* render Latin text, e.g. per se, in italics */
    font-style:italic
  }

  li:hover { /* doesn't work in Internet Explorer */
    background-color:blue
  }

  input:active {
    color:red
  }

  input:focus {
    background-color:yellow
  }

first-child 偽類的示例在 後代 選擇器部分的末尾給出。

可以指定多個偽類，例如，提醒使用者他們將滑鼠懸停在他們已經訪問過的連結上：

a:visited:hover {
  background-color:red
}

應注意使用偽類的規則順序。例如，如果您希望訪問過的連結為綠色，但使用者將滑鼠懸停在它們上時應為黃色，則規則必須按以下順序排列：

 a:visited{
   color:green
 }

 a:hover{
   color:yellow
 }

如果規則顛倒了，級聯 將意味著訪問過的顏色優先於懸停顏色。即使使用者將滑鼠懸停在訪問過的連結上，它們也會保持綠色。

偽元素

[編輯 | 編輯原始碼]

偽類和偽元素允許元素根據文件樹中元素的位置以外的資訊進行格式化。在 CSS1 和 CSS2.1 中，偽類和偽元素選擇器以冒號 : 為字首。在 CSS3 中，偽元素以 :: 為字首。

CSS 級別 1 定義了兩個偽元素 first-letter 和 first-line，它們分別選擇渲染元素的第一個字母和第一行。這些可用於應用排版效果，例如，在段落開頭建立首字母下沉。

 p:first-letter { color:red }

只能使用一個偽元素選擇器，它必須是選擇器鏈的最後部分。first-line 選擇器只能應用於塊級元素、內聯塊、表格標題和表格單元格。

CSS2.1 添加了另外兩個偽元素，before 和 after。

從 CSS3 開始，偽元素以 :: 而不是 : 為字首。

簡單選擇器

[編輯 | 編輯原始碼]

上面描述的選擇器（型別、類、ID、通用、偽類和偽元素）都是簡單選擇器的示例。簡單選擇器的完整語法為

  • 型別選擇器或通用選擇器
  • 零個、一個或多個類、ID 和偽類選擇器（CSS2.1 還允許屬性選擇器）
  • 零個或一個偽元素選擇器

以下都是簡單選擇器的示例

  p
  p.important
  p#navigation
  a:link
  p:first-line
  a:visited#homePage.menu2:first-letter
  *
  *#footer
  *.content.abstract
  *#mainArticle:first-letter

作為簡寫符號，如果通用選擇器 * 不是簡單選擇器的唯一組成部分，則可以省略。例如，#footer 等同於 *#footer，而 :first-line 等同於 *:first-line。

組合簡單選擇器：可以組合簡單選擇器來考慮元素的上下文。例如，您可能希望僅將規則應用於導航欄中的列表元素。

後代

[編輯 | 編輯原始碼]

後代選擇器允許您將樣式應用於巢狀在另一個指定元素內的元素。例如，您可以使每個 p 元素內的每個 span 元素都為粗體。span 可以是 p 元素的子元素，也可以是孫子元素，或曾孫子元素等。

CSS 規則

 p span{
   font-weight:bold;
 }

示例 HTML

 <p>Start of paragraph. <span>This span is bold.</span> Rest of paragraph.</p>
 <div>Start of division. <span>This span is normal.</span> Rest of division.</div>

示例渲染

段落開始。 此跨度是粗體的。 段落剩餘部分。

分割槽開始。 此跨度是正常的。 分割槽剩餘部分。

下一個示例將導航部分中已訪問連結的顏色更改為。文件其他部分中的已訪問連結將不受影響。

CSS 規則

 ul#navigation a:visited {
   color:red
 }

示例 HTML

 <ul id="navigation">
   <li><a href="HomePage">Home</a></li>
   <li><a href="AnotherPage">A page you haven't visited yet.</a></li>
 </ul>

示例渲染

  • 首頁
  • 您尚未訪問的頁面。

使用 first-child 選擇器的示例。

CSS 規則

 div.content strong:first-child {
   color:red
 }

示例 HTML

 <div class="content">
   <p>Some <em>emphasized</em> text and some <strong>strongly emphasized</strong> text.</p>
   <p>Some <strong>strongly emphasized</strong> text and some <em>emphasized</em> text.</p>
 </div>

示例渲染

一些 強調 文字和一些 強烈強調 文字。

一些 強烈強調 文字和一些 強調 文字。

需要注意的兩個要點

  • 如果元素前面有文字，則它仍然是第一個子元素，因此第一段中的 em 元素和第二段中的 strong 元素是其各自段落的第一個子元素。
  • 僅當元素匹配選擇器的所有部分時，才會將規則應用於該元素。第一段中的 strong 元素是第二個子元素，因此與 strong:first-child 選擇器不匹配。

分組選擇器

[編輯 | 編輯原始碼]

選擇器可以分組為逗號分隔的列表。

h1, h2, h3 { text-align:center; }

等同於

h1 { text-align:center; }
h2 { text-align:center; }
h3 { text-align:center; }

一個元素可以被多個規則選中

 h1, h2, h3, h4, h5, h6 { color: white; background-color: red; }
 h1 { color: yellow; }

所有標題都將具有紅色背景。2-6 級標題將具有白色文字。1 級標題將具有黃色文字。

規則的順序很重要。在以下示例中，所有標題將具有白色文字。

 h1 { color: yellow; } 
 h1, h2, h3, h4, h5, h6 { color: white; background-color: red; }

當多個規則應用於一個元素時，級聯 用於確定應用於該元素的最終樣式。

後來的 CSS 版本

[編輯 | 編輯原始碼]

CSS 2.1 中的附加選擇器

  • 子選擇器
  • 相鄰兄弟選擇器
  • 屬性選擇器
  • 更多偽類和偽元素。

CSS 3 中的附加選擇器

  • 更多兄弟選擇器
  • 更多屬性選擇器
  • 更多偽類和偽元素。
取自 "https://wikibook.tw/w/index.php?title=Cascading_Style_Sheets/Selectors&oldid=4409340"
華夏公益教科書