本文摘自PHP中文网，作者爱喝马黛茶的安东尼，侵删。
更改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。
以上就是bootstrap可以更改样式吗的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
更多相关阅读请进入《bootstrap》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
