表1-1 选择器和所对应的优先级选择器优先级  #menu h20,1,01h2.titile 0,0,1,1h2+p
0,0,0,2
表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]该属性的值必须包含特定值（⽽⽆论其位置怎么样）
表1-3 CSS3中常见伪类
属性
描述
Bootstrap 的优先级、选择器、伪类
概述：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 选择器有同样的优先级，在样式表中后⾯的那个起作⽤。
下⾯有⼏个例⼦和对应的优先级，看表说话：
同理，计算下⾯两个选择器的优先级：
#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. 属性选择器css样式表优先级最高
    Bootstarp 的CSS 组件⾥使⽤了很多属性选择器，⽐如[data-toggle^=button]、[data-toggle=toggle]等。属性选择器有多种⽤法，下⾯列出了这些⽤法的区别：
  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 只⽤了常⽤的⼏个，这⾥我们只简单列⼀下常⽤的伪类和其对应的意思，具体看表说话：
: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;
}
注意：多个伪类可以⼀起使⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。