CSS 常见问题解答

本文中，您将找到一些关于 CSS 的常见问题解答 (FAQ)，以及可能在您成为 Web 开发人员的旅程中提供帮助的答案。

为什么我的 CSS 有效，但渲染不正确？

浏览器使用DOCTYPE声明来选择是否使用与 Web 标准更兼容的模式或使用旧浏览器中的错误来显示文档。在 HTML 开头使用正确且现代的DOCTYPE声明将提高浏览器对标准的兼容性。

现代浏览器有两种主要的渲染模式

  • 怪异模式：也称为向后兼容模式，允许旧版网页按照其作者的意图呈现，遵循旧版浏览器使用的非标准渲染规则。具有不完整、不正确或缺少DOCTYPE声明或在 2001 年之前常用的已知DOCTYPE声明的文档将在怪异模式下呈现。
  • 标准模式：浏览器尝试严格遵循 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/cssMIME 类型提供服务。如果 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 变量现在提供了一种在某处定义样式信息并在多个位置重复使用该信息的方法。

如何为一个元素分配多个类？

通过在class属性中列出类并用空格分隔它们，可以为 HTML 元素分配多个类。

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属性中类的顺序无关紧要。

为什么我的样式规则无法正常工作？

在某些情况下，语法正确的样式规则可能无法应用。您可以使用检查器的CSS 面板的规则视图来调试此类问题，但下面列出了忽略样式规则的最常见情况。

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 *选择器将规则应用于主体内的所有元素，在任何层次结构级别，包括.stockUp类。因此，应用于.corpName类的font-weight: bold;被应用于主体中所有元素的font-weight: normal;覆盖。

应尽量减少使用 * 选择器，因为它是一个缓慢的选择器，尤其是在不用作选择器第一个元素时。应尽可能避免使用它。

CSS 中的特异性

当多个规则应用于某个元素时，所选规则取决于其样式特异性。内联样式（在 HTMLstyle属性中）具有最高的特异性，并将覆盖任何选择器，其次是 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 兼容性，如兼容性生存标准中所述。

浏览器在实现新的实验性功能时不再使用 CSS 前缀。相反，它们在可配置的实验标志后面或仅在 Nightly 浏览器版本或类似版本上测试新功能。

如果您的工作需要使用前缀，请先编写前缀版本，然后再编写非前缀标准版本。这样，当支持标准版本时，它将自动覆盖前缀版本。例如

css
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;

注意：有关处理前缀属性的更多信息，请参阅我们跨浏览器测试模块中的处理常见的 HTML 和 CSS 问题——处理 CSS 前缀。

注意：有关浏览器前缀 CSS 属性列表，请参阅Mozilla CSS 扩展和WebKit CSS 扩展。

z-index 与定位有什么关系？

z-index 属性指定元素的堆叠顺序。

具有更高 z-index/堆叠顺序的元素始终在屏幕上位于具有较低 z-index/堆叠顺序的元素前面。Z-index 仅适用于具有指定位置（position:absolute、position:relative或position:fixed）的元素。

注意：有关更多信息，请参阅我们的定位学习文章，尤其是介绍 z-index部分。