1. 學習
  2. 如何解決常見問題
  3. 常見的 CSS 問題
  4. 常見問題解答

CSS 常見問題解答

在本文中，您將找到有關 CSS 的一些常見問題 (FAQs) 以及答案，這些答案或許能幫助您在成為一名網頁開發者的道路上前進。

為什麼我有效的 CSS 沒有正確渲染？

瀏覽器使用 doctype 宣告來選擇是使用更符合 Web 標準的模式還是更相容舊瀏覽器 bug 的模式來顯示文件。在 HTML 開頭使用正確且現代的 doctype 宣告將提高瀏覽器的標準遵從性。

現代瀏覽器有兩種主要的渲染模式

  • 怪異模式 (Quirks Mode)：也稱為向後相容模式，它允許按照作者的預期渲染舊版網頁，遵循舊版瀏覽器使用的非標準渲染規則。文件如果缺少、不完整或不正確的 doctype 宣告，或者使用了 2001 年前常用的已知 doctype 宣告，則會以怪異模式渲染。
  • 標準模式 (Standards Mode)：瀏覽器會嘗試嚴格遵循 W3C 標準。新 HTML 頁面預計會為符合標準標準的瀏覽器設計，因此，具有現代 doctype 宣告的頁面將以標準模式渲染。

基於 Gecko 的瀏覽器有第三種 有限怪異模式，它只有一些小的怪異之處。

將觸發標準模式的標準 doctype 宣告是

html
<!doctype html>

儘可能，您應該只使用上述 doctype。還有其他有效的舊版 doctype 會觸發標準模式或幾乎標準模式。

html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

為什麼我有效的 CSS 完全沒有渲染？

以下是一些可能的原因

  • CSS 檔案路徑不正確。
  • 要被應用，CSS 樣式表必須以 text/css MIME 型別提供。如果 Web 伺服器沒有以這種型別提供，它將不會被應用。

id 和 class 有什麼區別？

HTML 元素可以有一個 id 和/或 class 屬性。id 屬性為應用它的元素分配一個名稱，並且為了使標記有效，該名稱只能有一個元素。class 屬性為元素分配一個類名，該名稱可以在頁面中的許多元素上使用。CSS 允許您將樣式應用於特定的 id 和/或 class 名稱。

  • 當您希望將樣式規則應用於頁面中的多個塊和元素時，或者當您目前只有一個要設定樣式的元素，但以後可能需要新增更多元素時，請使用特定於類的樣式。
  • 當您需要將應用的樣式規則限制在一個特定的塊或元素時，請使用特定於 id 的樣式。此樣式將僅由具有該特定 id 的元素使用。

通常建議儘可能多地使用類，並且僅在絕對必要時（例如連線標籤和表單元素或設定必須在語義上唯一的元素樣式）才使用 id。

  • 使用類使您的樣式具有可擴充套件性 — 即使您現在只有一個元素需要應用特定的規則集，以後也可能需要新增更多元素。
  • 類允許您設定多個元素的樣式，因此它們可以使樣式表更短，而不是必須在多個使用 id 選擇器的規則中寫出相同的樣式資訊。更短的樣式表效能更好。
  • 類選擇器的 特異性 比 id 選擇器低，因此如果需要，更容易被覆蓋。

注意： 有關更多資訊，請參閱 選擇器。

如何恢復屬性的預設值？

最初 CSS 沒有提供“預設”關鍵字，恢復屬性預設值的唯一方法是顯式重新宣告該屬性。例如

css
/* Heading default color is black */
h1 {
  color: red;
}
h1 {
  color: black;
}

這已隨著 CSS 2 得到改變；關鍵字 initial 現在是 CSS 屬性的有效值。它將其重置為其預設值，該預設值在給定屬性的 CSS 規範中定義。

css
/* Heading default color is black */
h1 {
  color: red;
}
h1 {
  color: initial;
}

如何從一個樣式派生出另一個樣式？

CSS 並不完全允許將一個樣式定義為另一個樣式。但是，為單個元素分配多個類可以達到相同效果，並且 CSS 變數 現在提供了一種在一處定義樣式資訊並在多處重用的方法。

如何為一個元素指定多個類？

HTML 元素可以透過在 class 屬性中列出類名（用空格分隔）來分配多個類。

html
<style>
  .news {
    background: black;
    color: white;
  }
  .today {
    font-weight: bold;
  }
</style>

<div class="news today">Content of today's news goes here.</div>

如果同一屬性在兩個規則中都已宣告，則衝突將首先透過特異性解決，然後根據 CSS 宣告的順序解決。class 屬性中類的順序無關緊要。

為什麼我的樣式規則沒有正常工作？

語法上正確的樣式規則在某些情況下可能不起作用。您可以使用 Inspector 的 CSS Pane 中的 Rules view 來除錯此類問題，但以下列出了最常見的被忽略的樣式規則的例項。

HTML 元素層級結構

CSS 樣式應用於 HTML 元素的方式也取決於元素的層級結構。重要的是要記住，應用於後代元素的規則會覆蓋父元素的樣式，儘管 CSS 規則的特異性或優先順序如何。

css
.news {
  color: black;
}
.corpName {
  font-weight: bold;
  color: red;
}
html
<!-- news item text is black, but corporate name is red and in bold -->
<div class="news">
  (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on
  Thursday…
</div>

在複雜的 HTML 層級結構中，如果某個規則似乎被忽略了，請檢查該元素是否位於具有不同樣式的另一個元素內部。

顯式重新定義的樣式規則

在 CSS 樣式表中，順序很重要。如果您定義了一個規則，然後又重新定義了同一個規則，則將使用最後一個定義。

css
#stockTicker {
  font-weight: bold;
}
.stockSymbol {
  color: red;
}
/*  other rules             */
/*  other rules             */
/*  other rules             */
.stockSymbol {
  font-weight: normal;
}
html
<!-- most text is in bold, except "GE", which is red and not bold -->
<div id="stockTicker">NYS: <span class="stockSymbol">GE</span> +1.0…</div>

為避免此類錯誤，請嘗試為特定選擇器僅定義規則一次，並將屬於該選擇器的所有規則分組。

使用簡寫屬性

使用簡寫屬性定義樣式規則是好的，因為它使用了一種非常簡潔的語法。使用簡寫屬性只設置部分屬性是可能的且正確的，但必須記住未宣告的屬性會自動重置為其預設值。這意味著先前對單個屬性的規則可能會被隱式覆蓋。

css
#stockTicker {
  font-size: 12px;
  font-family: "Verdana";
  font-weight: bold;
}
.stockSymbol {
  font: 14px "Arial";
  color: red;
}
html
<div id="stockTicker">NYS: <span class="stockSymbol">GE</span> +1.0…</div>

在上例中，問題發生在屬於不同元素的規則上，但它也可能發生在同一個元素上，因為規則順序很重要。

css
#stockTicker {
  font-weight: bold;
  font: 12px "Verdana"; /* font-weight is now set to normal */
}

使用 * 選擇器

* 萬用字元選擇器引用任何元素，並且必須格外小心使用。

css
body * {
  font-weight: normal;
}
#stockTicker {
  font: 12px "Verdana";
}
.corpName {
  font-weight: bold;
}
.stockUp {
  color: red;
}
html
<div id="section">
  NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0…
</div>

在此示例中，body * 選擇器將規則應用於 body 內的任何元素，無論其層級結構如何，包括 .stockUp 類。因此，應用於 .corpName 類的 font-weight: bold; 被應用於 body 中所有元素的 font-weight: normal; 所覆蓋。

應儘量減少使用 * 選擇器，因為它是一個慢速選擇器，尤其是在它不是選擇器的第一個元素時。應儘可能避免使用它。

CSS 中的特異性

當多個規則應用於某個元素時，所選規則取決於其樣式 特異性。內聯樣式（HTML style 屬性中）的特異性最高，會覆蓋任何選擇器，其次是 ID 選擇器，然後是類選擇器，最後是元素選擇器。因此，下面 <div> 的文字顏色將是紅色的。

css
div {
  color: black;
}
#orange {
  color: orange;
}
.green {
  color: green;
}
html
<div id="orange" class="green" style="color: red;">This is red</div>

當選擇器有多個部分時，規則會更復雜。有關選擇器特異性計算方法的詳細說明，請參閱 CSS 特異性文件。

-moz-*、-ms-*、-webkit-*、-o-* 和 -khtml-* 屬性是做什麼用的？

這些屬性稱為字首屬性，是對 CSS 標準的擴充套件。它們曾被用來允許在瀏覽器中使用實驗性和非標準功能，而不會汙染常規名稱空間，從而在標準擴充套件時防止出現未來的不相容性。

不建議在生產網站上使用此類屬性 — 它們已經造成了巨大的 Web 相容性混亂。例如，許多開發人員只使用屬性的 -webkit- 字首版本，而忽略了非字首版本在所有瀏覽器中都已完全支援。這意味著依賴該屬性的設計將無法在非 Webkit 瀏覽器中正常工作，而實際上是可以的。這已成為一個足夠大的問題，以至於其他瀏覽器被迫實現了 -webkit- 字首的別名以提高 Web 相容性，如 Compatibility Living Standard 所指定的。

瀏覽器在實現新的實驗性功能時不再使用 CSS 字首。相反，它們在可配置的實驗性標誌後面，或僅在 Nightly 瀏覽器版本或類似版本中測試新功能。

如果您的工作中需要使用字首，請先寫字首版本，然後寫非字首的標準版本。這樣，當支援標準版本時，它將自動覆蓋字首版本。例如

css
-webkit-border-after-color: navy;
border-block-end-color: navy;

注意： 有關瀏覽器字首 CSS 屬性列表，請參閱 Mozilla CSS 擴充套件和 WebKit CSS 擴充套件。

z-index 與定位有什麼關係？

z-index 屬性指定元素的堆疊順序。

具有較高 z-index/堆疊順序的元素始終顯示在具有較低 z-index/堆疊順序的元素前面。Z-index 僅對具有指定位置（position:absolute、position:relative 或 position:fixed）的元素有效。

注意： 有關更多資訊，請參閱我們的 定位 學習文章，特別是 引入 z-index 部分。

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.