生成一个忽略所有其他 CSS 并仅使用它自己的 div答案

【问题标题】：Generating a div that ignores all other CSS and uses only its own生成一个忽略所有其他 CSS 并仅使用它自己的 div
【发布时间】：2011-02-14 15:52:15
【问题描述】：

我在我的许多网页中都包含了一个 div 标头，它们都有截然不同的样式表。这会导致标题在每种不同类型的页面上不希望地继承页面的某些父属性（字体颜色、字体等）。我怎样才能使 div 只采用适用于它的 CSS，而忽略所有其他 CSS？

【问题讨论】：

【解决方案1】：

您可以包含和修改 reset.css 以使用您唯一的类名或 ID。

【讨论】：

【解决方案2】：

在 CSS 中的任何元素语句中，添加标题 id。

作为纯文本示例（不使用您的 ID）

#header { width:100%; background-colour:#f00; }

#header #navbar { width:75% }

这将覆盖任何简单的样式

#navbar { width:20% }

这是因为在 CSS 中，每个级别的特殊性都会赋予样式更多的“权重”，以推翻另一个样式。（阅读http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/或http://css-tricks.com/specifics-on-css-specificity/了解更多详情）。

但是，如果有这样的事情：

#navbar { width:20% color:#0f0; }

那么只有宽度会被覆盖，因为没有颜色样式。

【讨论】：

【解决方案3】：

CSS 是 Cascading Style Sheets 的首字母缩写。

如果您将标题的样式放在样式表的顶部，它将不会继承表单中的任何其他样式。

另外，如果你的标题是一个元素的子元素，它很可能会继承它的一些样式，所以如果你需要，请确保重置它们:)

【讨论】：