3

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

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

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

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

4 回答 4

7

Bootstrap的元素只有一点点CSS ：<table>

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

要覆盖这些，您可以为您的表创建一个名为无肩带或其他东西的类：

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

此table.strapless选择器将覆盖table引导程序使用的选择器，因为它更具体。

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

<table class="strapless">
于 2012-05-06T21:20:58.783 回答
1

您不能在不覆盖的情况下中和 CSS 规则。因此，您必须按照上述答案中的建议进行操作。

于 2012-05-06T21:49:04.397 回答
0

在 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规则。

于 2012-05-06T21:09:04.660 回答
0

如果有相当数量的 CSS，您网站的 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>
于 2012-05-06T21:31:04.213 回答