Bootstrap CSS 覆盖我的自定义 CSS

Question

我正在使用 Twitter Bootstrap 的 CSS，由于某些原因它覆盖了我的一些类。

首先我在我的自定义 CSS 之前加载它（我使用的是 jam 和 stylus 模板引擎）： HTML 标头：

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/css/vendor/bootstrap.min.css')
    link(rel='stylesheet', href='/css/style.css')

在我的 HTML 正文中：

table.table.table-striped
  thead
    th some items
    th some items
    th some items
  tbody
    tr
      td.table__td 
        a.table__link(href='/') some items
    tr
      td.table__td 
        a.table__link(href='/') some items
    tr
      td.table__td 
        a.table__link(href='/') some items

CSS：

.table__td
  padding 0

但是我在我的表 td 上得到了原始的 8px 填充：

怎么会这样？

非常感谢

Answer 1

因为bootstrap的css声明不仅仅是

.table td /*specificity = 0 1 1*/

但是

.table > tbody> tr > td /*specificity = 0 1 3*/

所以 Bootstrap 的 CSS 选择器特异性比你的要大。

如果您希望应用您的规则，则必须具有更大的特异性（或相同级别，但在引导程序之后声明）才能覆盖引导程序样式。

例如：

.table > tbody> tr > td.table__td{ /*specificity = 0 2 3*/
  padding:0;
}

或者简单地说：

.table > td.table__td{  /*specificity = 0 2 1*/
  padding:0;
}

Answer 2

因为 bootstrap 具有更高的 CSS 优先级，因为它的特殊性。

http://css-tricks.com/specifics-on-css-specificity/

http://www.alternategateways.com/tutorials/css/css-101/part-four-the-css-order-of-precedence

解决方案

将您的 CSS 规则更改为：

.table > tbody > tr > td.table__td

Answer 3

这是因为 bootstrap 有更具体的声明。 使用这个：.table>....>td。如果你不能这样做，请使用!important：.table td{padding:0!important}。

Answer 4

试试

.table > tbody > tr > td.table__td { 填充 0}