Bootstrap CSS覆盖我的自定义CSS

我使用Twitter Bootstrap的CSS，并由于某些原因它覆盖了我的一些类。Bootstrap CSS覆盖我的自定义CSS

首先我我的自定义CSS之前加载它（我用玉和手写笔的模板引擎）： 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

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

enter image description here

这是怎么发生的？

非常感谢

来源

2014-10-01 Spearfisher

谷歌的CSS选择器的特异性' – 2014-10-01 13:32:55

你缺少括号？ – Dorvalla 2014-10-01 13:33:19

这里有一个很好的解释：[关于css特异性的细节]（http：// css-tricks。com/specifics-on-css-specificity /） – 2014-10-01 13:34:44

因为自举的CSS声明不仅

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

但

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

所以引导的CSS选择器的特异性比你大。

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

例：

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

或者干脆：

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

来源

2014-10-01 13:33:39 ylerjen

由于引导具有较高的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

来源

2014-10-01 13:33:44 Curt

这个规则不起作用，因为单元格不在'thead'中，而是在'tbody'中！ – ylerjen 2014-10-01 14:27:25

@ Miam84斑斑斑斑，回答更新 – Curt 2014-10-01 14:30:58

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

来源

2014-10-01 13:33:51

'！重要的'在这种情况下是一种黑客，它会在将来回击OP，IMO。 – Curt 2014-10-01 13:39:37

尝试

。表> TBODY> TR> td.table__td { 填充0}

来源

2014-10-01 13:36:31 Macsupport

Bootstrap CSS覆盖我的自定义CSS

回答

相关问题