부트 스트랩 CSS가 내 사용자 정의 CSS를 덮어 씁니다.

Question

트위터 부트 스트랩의 CSS를 사용하고 있으며, 몇 가지 이유 때문에 일부 클래스를 덮어 씁니다.

먼저 나는 (I 옥 스타일러스 템플릿 엔진을 사용하고 있습니다) 내 사용자 지정 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 패딩이 있습니다.

어떻게 될 수 있습니까?

많은 감사

Answer 1

을 부트 스트랩의 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; 
} 

Answer 2

부트 스트랩 높은 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

이입니다. 사용 : .table>....>td. 그렇게 할 수 없다면 !important : .table td{padding:0!important}을 사용하십시오.

Answer 4

시도

.table> TBODY> TR> td.table__td { 패딩 0}