如何替换bootstrap中的样式

更改bootstrap的默认样式

很久没用bootstrap，对与按自己的需求修改样式都忘了。

一上来就添加了新的class类，重写css样式让其覆盖原有的样式，实际上不起作用。因为没考虑的选择器的优先级。面试的时候会问到一些这个问题，一直不能从理论和实践联系起来。

我的解决方案是通过子选择器来增加权重，看别人也有用id的，我不太喜欢添加id的选择器。

回忆一波选择器以及其优先级。

一、css选择器

1.标签选择器(如：body,div,p,ul,li)

2.类选择器(如：class)

3.ID选择器(如：id)

4.全局选择器(如：*号)

5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)

6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)

7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

8.继承选择器(如：div p,注意两选择器用空格键分开)

9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)

10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)

11.子选择器 (如：div>p ,带大于号>)

12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)

相关推荐：《bootstrap入门教程》

二、优先级

当在一个样式声明上使用 !important 规则时，该样式声明会覆盖CSS中任何其他的声明。ie6不支持该属性

内联样式表的权值最高 1000；即在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。

ID 选择器的权值为 100；由一个或多个id选择器来定义。例如，#id{margin:0;}id选择器会覆盖类选择器.classname{margin:3pxl}

Class 类选择器的权值为 10；由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}

标签选择器权值为 1：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px;}

通配符选择器：如*{marigin:6px;}

浏览器自定义或继承权值为0.1

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

三、！important

使用 !important 是一个坏习惯，应该尽量避免，因为这打断了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有!important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

查询的经验：

永远不要在全站范围的 css 上使用 !important

只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important

永远不要在你的插件中使用 !important

要优化考虑使用样式规则的优先级来解决问题而不是 !important

Das obige ist der detaillierte Inhalt von如何替换bootstrap中的样式. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!