概述:Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理。由于大部分的选择器都非常的常见就一笔带过了,这里重点介绍一下Bootstrap用到的知识点。

一、优先级

之前我们使用CSS的时候知道样式有三种,分别是行内样式、内嵌样式、外部样式,它们的优先级是 行内>内嵌>外部。

OK,现在我们将Bootstarp的优先级,如何确定CSS的优先级?这里我们要先引入一个机制,分别用4个数字(a,b,c,d)表示优先级组合,

比如1,1,1,1和0,1,0,1。它们的意思分别是:

  1. 第一个数字(a)表示style属性,优先级最高。由于一般都是class样式,所以该值一般都是0。
  2. 第二个数字(b)表示该css选择器上的id数量的总和,一般都是1个。
  3. 第三个数字(c)是用在改css选择器上的其他属性css选择器以及伪类的总和。这个里包括class(.btn)和属性css选择器(比如li[id=red])。
  4. 第四个数字(d)计算元素(就像table、p、div等)和伪元素(就像first-child等)。
  5. 通用css选择器(*)是0优先级。
  6. 如果两个CSS选择器有同样的优先级,在样式表中后面的那个起作用。

下面有几个例子和对应的优先级,看表说话:

表1-1 选择器和所对应的优先级
选择器 优先级   
#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。

二、选择器

每一条CSS样式的定义都有两部分组成,形式如下:选择器{样式}。在{}之前的部分就是"选择器"。"选择器"指明了应用这些"样式"的网页元素。

  1. 属性选择器

    Bootstarp的CSS组件里使用了很多属性选择器,比如[data-toggle^=button]、[data-toggle=toggle]等。属性选择器有多种用法,下面列出了这些用法的区别:

表1-2 常见属性选择器用法
            选择器          用法
[att=value] 该属性有指定的确切值
[att~=value] 该属性值必须是多个用空格隔开的值,比如,class="title featured home",而且这些值中的一个必须是指定的值"value"
[att|=value]  属性的值就是"value"或则以"value"开始并立即跟上一个"-"字符,也就是"value-",比如lang="zh-cn"
[att^=value] 该属性的值必须以指定的值开始
[att$=value] 该属性的值必须以特定值结束
[att*=value] 该属性的值必须包含特定值(而无论其位置怎么样)

 

 

 

 

 

 

 

 

  

  2.子选择器

     CSS里的子元素用符号">"表示。如下实例是表示拥有table样式的表格,其thead元素内的tr元素如果有th的话,则应用该样式

.table > thead > tr > th { 
  vertical-align:bottom; 
  border-bottom:2px solid #dddddd;
}

  3.兄弟选择器

    兄弟元素分为两种,一种是临近兄弟,一种是普通兄弟。临近兄弟的选择符用"+" 表示。比如导航条里要设置两个li之间的外边距,则需要如下定义:

.nav-pills > li + li { 
  margin-left:2px;  /*加大左外边距*/ 
}

    如果只想查找某一个指定元素后面的兄弟节点(而不限制于临近节点),可以使用普通兄弟节点的符号"~"。比如:

.article h1 ~ p { 
  font-size:13px;   
}

三、伪类

  CSS提供了非常多的可用伪类,但是Bootstrap只用了常用的几个,这里我们只简单列一下常用的伪类和其对应的意思,具体看表说话:

表1-3 CSS3中常见伪类
属性 描述
:hover 鼠标滑过时的状态
:focus 元素拥有焦点时的状态
:first-child 指定某一个元素的第一个子元素
:last-child 指定某一个元素的最后一个子元素
:nth-child() 指定某个元素的一个或多个特定的子元素,可以传入数字,也可以传入even(偶数)或odd(奇数)

 

 

 

 

 

 

 

 

 

  

举个例子,按钮组里,除第一个按钮、最后一个按钮和带有dropdown-toggle样式的元素外,其他btn样式的按钮都不能设置圆角。使用如下代码:

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle){ 
  border-radius:0;   
}

注意:多个伪类可以一起使用。

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Bootstrap基础篇—常见的CSS类详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。