選擇器(CSS)

CSS 選擇器是 CSS 規則的一部分,用於描述規則將匹配文件中的哪些元素。匹配到的元素將會應用該規則指定的樣式。

示例

參考這段 CSS

css
p {
  color: green;
}

div.warning {
  width: 100%;
  border: 2px solid yellow;
  color: white;
  background-color: darkred;
  padding: 0.8em 0.8em 0.6em;
}

#customized {
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    sans-serif;
}

這裡的選擇器有 "p"(它將任何 <p> 元素內的文字顏色設為綠色)、"div.warning"(它使任何帶有 class "warning"<div> 元素看起來像一個警告框),以及 "#customized"(它將 ID 為 "customized" 的元素的基礎字型設定為 16 畫素高的 Lucida Grande 或幾種備用字型之一)。

然後我們可以將此 CSS 應用於一些 HTML,例如

html
<p>This is happy text.</p>

<div class="warning">
  Be careful! There are wizards present, and they are quick to anger!
</div>

<div id="customized">
  <p>This is happy text.</p>

  <div class="warning">
    Be careful! There are wizards present, and they are quick to anger!
  </div>
</div>

生成的頁面內容樣式如下

另見