Bootstrap CSS overwriting my custom CSS

问题

I am using Twitter Bootstrap's CSS and for some reasons it overwrites some of my classes.

First I load it before my custom CSS (I am using jade and stylus template engines): HTML header:

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

in my HTML body:

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

However I get the original 8px padding on my table td:

How can this happen?

Many thanks

回答1:

Because bootstrap's css declaration is not only

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

but

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

So the CSS selector specificity of Bootstrap is bigger than yours.

If you want your rule to be applied, you have to have a bigger specificity (or same level, but declared after the bootstrap one) to overwrite the bootstrap style.

Ex:

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

or simply :

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

回答2:

Because bootstrap has higher CSS precedence due to its specificity.

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

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

Solution

Change your CSS rule to:

.table > tbody > tr > td.table__td

回答3:

This is because bootstrap has a more specific declaration. Use this: .table>....>td. if you can't do that, use !important: .table td{padding:0!important}.

回答4:

Try

.table > tbody > tr > td.table__td { padding 0}

来源：https://stackoverflow.com/questions/26142598/bootstrap-css-overwriting-my-custom-css

标签

html

css

twitter-bootstrap

pug

stylus