Bootstrap CSS覆盖我的自定义CSS [英] Bootstrap CSS overwriting my custom 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屋!