Question

我有一个外部CSS文件正在导入我的一个页面。此外部CSS将样式分配给HTML标记。例如，

table {
    width: 100%;
    font-size: 3em;
    // long list of CSS styles
}

tr {
    width: 100%;
    font-size: 3em;
    // long list of CSS styles
}

为单个表覆盖这些外部CSS样式的最佳方法是什么？例如，如果我有一张桌子而且我不想在桌子上使用这些外部样式，我该怎么做？

感谢。

编辑 - 作为澄清，“长样式的CSS样式”有数百种样式。到目前为止，大多数答案都建议我覆盖提供的CSS。我是否需要覆盖所有数百种样式？

Answer 1

在要覆盖的其他CSS之后加载自己的CSS。最后的阅读规则（如果具有相同的特异性水平）将胜出。您只需要覆盖您需要/想要的特定规则 - 而不是所有规则。

Answer 2

你可以在你的桌子上使用内联样式，

<table style='width:90%'>
<tr style='font-size: 4.4em'>

或在外部文件中为表设置单独的类，或者创建包含这些样式的另一个.css文件

.otherTable{
    width: 90%;
    font-size: 2.3em;
    // long list of CSS styles
}

并在你的HTML中，

<table class='otherTable'>

Answer 3

您应该在外部css文件之后立即重写它们。按以下顺序加载它们：

http://www.externalserver.com/styles.css
css/general.css

然后应用适合您网站主题的样式。

Answer 4

除了j08691所述之外，如果您的CSS生效有问题，请在分号前添加短语“！important”，以确保它覆盖其他设置。

http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

Answer 5

懒惰，只是在该特定页面上涂写一些javascript。

以下是SO Q / A：

https://stackoverflow.com/a/196038/1617149

或者您可以在呈现页面之前在jQuery / Prototype中执行此操作，例如关于DOM加载。

覆盖外部CSS

5 个答案: