CSS 選擇器簡介

本課程深入探討使用級聯樣式表 (CSS) 來增強 HTML 視覺效果。我們將從 CSS 選擇器開始—用於定位特定 HTML 元素的工具。

層疊樣式表 (CSS)

CSS 規定了 HTML 元件的外觀：顏色、間距、大小等等。雖然您可以使用內嵌 style 屬性（例如 ）來設定各個元素的樣式，但這對於大型網站來說效率很低。

更有效的方法是在 HTML 的 <style> 部分中使用 <head> 元素，或使用 style.css:<link> 連結到 HTML 的單獨 CSS 檔案（如

）

<code class="language-html">  <style>
    p {
      color: red;
      text-decoration: underline;
    }
  </style></code>

或

<code class="language-html"><!-- index.html -->
<link href="style.css" rel="stylesheet"></code>

<code class="language-css">/* style.css */
p {
  color: red;
  text-decoration: underline;
}</code>

這會將相同的樣式套用至所有  元素。瀏覽器開發人員工具（例如 Chrome 中的右鍵按一下「檢查」）可讓您檢查和修改套用的樣式以進行故障排除。

選擇 HTML 元素

p 中的 p { color: red; } 選取所有  元素。對於更複雜的結構，id 和 class 屬性提供更精細的控制。

類別和 ID 選擇器

每個元素可以有一個唯一的id。 ID 選擇器 (#idName) 透過 id 定位元素。但是，id 必須是唯一的，這限制了它們的靈活性。

課程提供了更多的多功能性。多個元素可以共享同一個類別。類別選擇器（.className）以此類別為目標元素。元素可以有多個類別（例如，）。

.red-text { color: red; } 使用 red-text 類別設定所有元素的樣式。 p.red-text 僅使用 .red-text 專門設定

元素的樣式 組合選擇器

文檔物件模型 (DOM) 將頁面的結構表示為樹。組合選擇器利用這個層次結構。

不鼓勵過於複雜的組合器組合。您可以將它們與類別選擇器組合（例如，.intro p）。

偽選擇器

偽類選擇器根據元素的狀態來設計元素的樣式（例如，a:hover、a:active、a:visited）。偽元素選擇器針對元素的部分（例如，::first-letter）。

其他選擇器

進一步閱讀：

這篇文章最初出現在 TheDevSpace。

以上是CSS 選擇器簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

看更多