更改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,带加号+)
二、优先级
- 当在一个样式声明上使用 !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的默认样式的更多相关文章
- 更改checkbox的默认样式
最近做一个vue项目要用到checkbox要修改默认样式,选中是纯白色,不选择只有白色边框,起初以为很容易,没想到还折腾了一翻,记录一下. 几经折腾,理清input 和label的关系 最终改进版本, ...
- [bootstrap] 基本css样式和组件
一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...
- 关于更改ListBox的ItemsPanel样式
首先定义一个ListBoxItem的样式,用来显示相应的图片信息 <Style TargetType="{x:Type ListBoxItem}" > <Sett ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- 更改BootStrap popover的默认样式
.popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padd ...
- 如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式?
Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根 ...
- 如何在PeopleSoft中找到并更改默认样式表名称
PeopleSoft的默认样式表名称是用来控制应用程序的外观的.在PeopleSoft中可以使用集中样式表来更改应用程序的外观,oracle为每个应用程序版本设置了默认的样式表. 下面是不同应用程序版 ...
- 自定义 Word 默认的 Normal.dotm 模板、更改 Word 默认字体、更改 Word 默认样式(16)
1. 引言 以Office 2016为例. 有没有遇见这样的问题: 每次新建一个 Word 空白文档打开后字体默认是等线,段落默认是单倍行距,默认标题也不是自己想要的样式,等一系列问题.每次打开都要调 ...
- html5中如何更改、去掉input type默认样式
1.如何去掉input type=date 默认样式 HTML代码: 选择日期:<input type="date" value="2017-06-01" ...
随机推荐
- VS2019 KEY
VS2019正式版 密钥 Visual Studio 2019 破解 激活码 Key Visual Studio 2019 Enterprise 企业版(亲测可用):BF8Y8-GN2QH-T84 ...
- 配置SpringMVC返回JSON遇到的坑
坑一:官方网站下载地址不明朗,最后找了几个下载地址:http://wiki.fasterxml.com/JacksonDownload Jackson2.5下载地址:jackson2.5.0.jar ...
- html制作简单框架网页 实现自己的音乐驿站 操作步骤及源文件下载 (播放功能限mp3文件)
使用HTML语言来设计制作 Hyper Text Markup Language 超文本标记语言 这门语言的特点就是标记,就是把所有的命令单词用<>标记起来,就可以发挥作用 还有一个特点, ...
- zabbix:告警、恢复消息次数
之前zabbix配置告警,存在告警信息发送多次并且恢复信息也跟着发送多次了,导致企业微信流量不够用,没有找到恢复信息单独的设置项 动作中的步骤我个人理解为:1-5的意思是发送5条告警消息 3 ...
- 二段式fsm
1.推荐在敏感表下的默认状态为X,这样描述的好处有2个: 好处1:仿真易观察bug. 好处2:综合对不定态X的处理是"Don't Care",即任何没有定义的状态寄存器向量都会被忽 ...
- [Redis]ResponseError: Client sent AUTH, but no password is set
由于在代码中给redis添加了密码,如下 redis_store = redis.Redis(host='localhost', port=6379, db=4, password='root') 然 ...
- Windows环境下python3.7版本怎么安装pygame
访问此网址 下载对应Python版本的pygame,如下图: 下载完成后,会有一个whl后缀的文件. 将此文件复制到Python根目录下的scripts目录下,打开cmd, 切换到scripts目录下 ...
- (转)ios截取屏幕代码
本文转自http://blog.sina.com.cn/s/blog_801997310101a769.html 截取本区域(self.view): UIGraphicsBeginImageConte ...
- inode结构体
inode分为内存中的inode和文件系统中的inode,为了避免混淆,我们称前者为VFS inode, 而后者以EXT2为代表,我们称为Ext2 inod.这里说明的是VFS inode. 重要成员 ...
- Spark 2.0.0 SPARK-SQL returns NPE Error
com.esotericsoftware.kryo.KryoException: java.lang.NullPointerExceptionSerialization trace:underlyin ...