跳轉到內容

層疊樣式表/選擇器

來自華夏公益教科書

在 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 文件正文部分中有效的元素（包括 body 元素本身）使用 class 屬性。這允許 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 定義了三個偽類

link
未訪問的連結
visited
已訪問的連結
active
活動連結

這些只能應用於錨點 (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 用於英國英語。
hover
當用戶用滑鼠懸停在元素上時應用。
active
現在允許在任何能夠“活動”的元素上使用 - 當元素處於活動狀態時應用。
focus
當元素具有鍵盤焦點時應用。

雖然 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>

渲染示例

段落開頭。 這個 span 是粗體的。 段落結尾。

分割槽開頭。 這個 span 是正常的。 分割槽結尾。

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

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"
華夏公益教科書