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.