首页 > 代码库 > Bootstrap的优先级和选择器
Bootstrap的优先级和选择器
概述:Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理。由于大部分的选择器都非常的常见就一笔带过了,这里重点介绍一下Bootstrap用到的知识点。
一、优先级
之前我们使用CSS的时候知道样式有三种,分别是行内样式、内嵌样式、外部样式,它们的优先级是 行内>内嵌>外部。
OK,现在我们将Bootstarp的优先级,如何确定CSS的优先级?这里我们要先引入一个机制,分别用4个数字(a,b,c,d)表示优先级组合,
比如1,1,1,1和0,1,0,1。它们的意思分别是:
- 第一个数字(a)表示style属性,优先级最高。由于一般都是class样式,所以该值一般都是0。
- 第二个数字(b)表示该css选择器上的id数量的总和,一般都是1个。
- 第三个数字(c)是用在改css选择器上的其他属性css选择器以及伪类的总和。这个里包括class(.btn)和属性css选择器(比如li[id=red])。
- 第四个数字(d)计算元素(就像table、p、div等)和伪元素(就像first-child等)。
- 通用css选择器(*)是0优先级。
- 如果两个CSS选择器有同样的优先级,在样式表中后面的那个起作用。
下面有几个例子和对应的优先级,看表说话:
选择器 | 优先级 |
#menu h2 | 0,1,01 |
h2.titile | 0,0,1,1 |
h2+p | 0,0,0,2 |
同理,计算下面两个选择器的优先级:
#leftbar li#first { color:red}
#leftbar li:first-child{ color:blue}
结果肯定是第1个比第2个优先级高,因为第1个优先级是0,2,0,1,而第2个是0,1,0,2。
二、选择器
未完待续...
Bootstrap的优先级和选择器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。