怎么替换bootstrap中的样式-创新互联

这篇文章给大家分享的是有关怎么替换bootstrap中的样式的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

10年积累的网站设计、成都做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有丁青免费网站建设让你可以放心的选择与我们合作。

更改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 相邻兄弟选择器器 (如:h2+p,带加号+)

二、优先级

当在一个样式声明上使用 !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中的样式-创新互联
当前地址:http://myzitong.com/article/dgojoe.html