Question

有没有办法在不覆盖所有内容的情况下中和元素的CSS规则？

例如，我正在使用Twitter Bootstrap，它为table提供了许多预定义的CSS定义。在某些地方，我不想要它们。

在某些table元素上，我想知道我是否可以这样做：

<table style="default"></table>

Answer 1

Bootstrap拥有<table>元素的only a little bit个CSS：

table {
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}

要覆盖这些，你可以为你的表创建一个名为strapless的东西：

table.strapless{
  max-width: 100%;
  background-color: transparent;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

此table.strapless选择器将覆盖bootstrap使用的table选择器，因为它是more specific。

要使用css类，请将其包含在表的class属性中：

<table class="strapless">

Answer 2

你无法在没有覆盖的情况下中和CSS规则。所以你必须按照上面的答案中的建议去做。

Answer 3

使用CSS中的类来定位不同的表元素。

table.black {
    background-color:black;
}

table.default {
    background-color:white;
}

然后，您可以将表元素分组并应用您想要应用的特定样式，只需在元素本身上为它们提供适当的类属性名称即可。

<table class="default">

<table class="black">

同样重要的是要注意CSS类定义将覆盖元素定义。一个好的经验法则是更具体的CSS选择器将覆盖不太具体的选择器。因此，如果由于某种原因您不想修改原始CSS文件，则可以从新的CSS文件应用不同的CSS样式。当然，这假设旧版CSS中还没有table.default规则和table.black规则。

Answer 4

如果有足够的数量，您的网站的CSS可能应该在外部样式表中。在这个样式表中，您可以执行其他人建议的操作，即为您的表提供一个类名，您可以在其中添加所需的CSS规则。

然后真正的键为了覆盖你的mysite.css样式表中新应用的CSS规则的Bootstrap样式表，这个样式表可以放在下面在HTML页面上，而不是bootstrap.css文件。像这样：

外部：

<!DOCTYPE html>
<html lang="en">
<head>
<link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/assets/css/mysite.css" rel="stylesheet" type="text/css">
</head>
</html>

如果您不想使用外部样式表路线，那么使用您在问题中建议的“内联”规则也可以（即覆盖bootstrap.css）：

内联：

<!DOCTYPE html>
<html lang="en">
<head>
<link href="/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
  <table>
      <tr>
         <td style="border-top: 1px solid red;"></td>
         <td></td>
     </tr> 
  </table>
</body>
</html>

如何在不重写的情况下中和CSS定义

4 个答案: