Bootstrap CSS覆盖我的自定义CSS [英] Bootstrap CSS overwriting my custom CSS

查看:225
本文介绍了Bootstrap CSS覆盖我的自定义CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



首先我在自定义CSS之前加载它(我使用的是jade和stylus模板引擎):
HTML标题:

  doctype html 
html
标题
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 ='/')一些项目
tr
td.table__td
a.table__link(href = '/')一些项目
tr
td.table__td
a.table__link(href ='/')一些项目

CSS:

  .table__td 
padding 0

然而,我得到了我的表td上的原始8px填充:




如何发生这种情况?



非常感谢

解决方案

css声明不仅是

  .table td / *特异性= 0 1 1 * / 

但是

  .table> TBODY> tr> td / *特异性= 0 1 3 * / 

因此Bootstrap的CSS选择器特异性比您的更大。

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



例如:

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

code


$ p

$ b pre> .table> td.table__td {/ *特异性= 0 2 1 * /
填充:0;
}


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

解决方案

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;
}

这篇关于Bootstrap CSS覆盖我的自定义CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆