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

回答

相關問題