css选择器


选择一部分

.q-bg-auto{
	background-color: #AABBB3;
}
/* 第一个 */
.q-bg-auto:first-child{
	background-color: #CDC673;
}
/* 最后一个 */
.q-bg-auto:last-child{
	background-color: #CDC673;
}
/* 连续的, 除了第一个 */
.q-bg-auto + .q-bg-auto{
	background-color: #9B95AD;
}
/* 第一个 */
.q-bg-auto:nth-child(1){
	background-color: #78A5F1;
}
/* 偶数2468 */
.q-bg-auto:nth-child(2n){
	background-color: #FF8247;
}
/* 奇数1357 */
.q-bg-auto:nth-child(2n-1){
	background-color: #9BCD9B;
}
/* 从0到3,即小于3的 */
.q-bg-auto:nth-child(-n+3){
	background-color: #8470FF;
}
/* 倒数第三个 */
.q-bg-auto:nth-last-child(3){
	background-color: #B0C4DE;
}
				

CSS选择器


# 元素/ div

- 元素 {样式声明 } - body{} , div{}, table{}

# 类/ .class

- .类名 {样式声明 } - .qpf{} - div.qpf{} : `div class="qpf"` - [class~=类名] {样式声明 } , 与上面等价. - [class~=qpf]{} - div[class~=qpf]{} : `div class="qpf"`

# ID / #id

- #id属性 {样式声明 } - #qpf{} - div#qpf{} : `div id="qpf"` - [id=id属性] {样式声明 } , 等价上面. - [id=qpf]{} - div[id=qpf]{} : `div id="qpf"`

# 通配选择器 IE7+

- *{} : 所有元素 - *.qpf{} : 设置了qpf样式类的所有元素, 与 .qpf{} 效果完全相同. ## 在CSS3中,星号(*)可以和命名空间组合使用: ns|* - 会匹配ns命名空间下的所有元素 *|* - 会匹配所有命名空间下的所有元素 |* - 会匹配所有没有命名空间的元素 ## 示例 *[lang^=en]{color:green;} : `p lang="en-gb" *.qpf {color:red;}` : 无意义. 直接使用 .qpf{}即可. *#qpf {border: 1px solid blue;} : 无意义. 直接使用 #qpf{}即可.

# 属性选择器 IE7+

/* 具有指定属性 */ a[title] { color: purple; } /* 具有指定属性和固定值 */ a[href="https://example.org"] { color: green; } /* 具有指定属性和(包含)固定值 */ a[href*="example"] { font-size: 2em; } 说明: [attr] : 表示带有以 attr 命名的属性的元素。 [attr=value] : 表示带有以 attr 命名的,且值为"value"的属性的元素。 [attr~=value] : 表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少一个值为"value"。 - 例如 div[class~=qpf btn]{} : div.qpf div.btn [attr|=value] : 表示带有以 attr 命名的属性的元素,属性值为“value”或是以“value-”为前缀; - 例如 div[class|=qpf]{} : 选择 div.qpf-btn div.qpf-img [attr^=value] : 表示带有以 attr 命名的,且值是以"value"开头的属性的元素。 - 例如 a[href^="#"] {} 判断是否锚链接 [attr$=value] : 表示带有以 attr 命名的,且值是以"value"结尾的属性的元素。 - 例如 a[href$=".org"] {} 判断资源类型显示不同样式. [attr*=value] : 表示带有以 attr 命名的,且值包含有"value"的属性的元素。 [attr operator value i] : 在带有属性值的属性选型选择器表达式的右括号(]括号)前添加用空格间隔开的字母i(或I)可以忽略属性值的大小写(ASCII字符范围内的字母) - 例如 a[href*="insensitive" i]{} 标识不区分大小写

组合选择器


# 相邻兄弟选择器 IE7+

- 前方元素 + 目标元素 {样式声明 } , 目的是选择前方元素相邻的目标元素(同级, 连续) - 示例: 选择紧跟 img元素后的"caption span"的样式: - html: <img src="photo1.jpg"><span class="caption">The first photo</span> - css : img + span.caption {} - 示例: li + li {} 选择的是从第二个li开始, 因为那它的兄弟相邻节点就是,第二个,第三个,第四个。可以理解成递归.除了第一个没样式之外,下面的都会有样式. 警告: - Internet Explorer 7 : 动态插入不会更新效果 - Internet Explorer 8 : 动态插入该元素的第一个子代元素的样式是不会生效的.

# 通用兄弟选择器 IE7+

- 元素 ~ 元素 {样式声明 }, 目的是选择某个元素之后的兄弟(同级, 之后, 不连续)

# 子选择器 IE7+

- 元素1 > 元素2 {样式声明 } , 只匹配元素1下的元素2(只是子元素, 不包含孙子元素). - div > span {} : div的直接后代(子元素). 即 span内的span元素不会匹配.

# 后代选择器 IE7+

- 元素1 元素2 {样式声明 } , 匹配元素1下的所有元素2. - div span{} : div内所有span. 即 span内的span元素也会匹配.

css生效优先级

当发现写的样式没用生效. 就要注意下css属性生效的优先级.


总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

# 不同级别
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承

# 同一级别
同一级别中后写的会覆盖先写的样式

# 属性选择器 与 类选择器
input[type=text] {background:red} 和 类选择器 .aa{background:black} 的优先级问题

列举;
.aa > input : 类选择器和属性选择器 都是0,0,1,0的权重, 后面覆盖前面的.
input[type=text] 0,0,1,1 > .aa 0,0,1,0  
- : input[type=text] 是一个标签选择器(input)和一个属性选择器([type=text]),所以权重是10 + 1;
	属性+元素 不管书写顺序, 始终优先与类.
	[type=text]{} 的写法与 .a 权重相同, 看先后顺序.


# 特殊性
选择器的特殊性分为4个等级,a b c d,从左到右,越左边的越优先, 如果一个选择器规则有多个相同类型选择器,则+1。
1.如果是HTML内样式,那么特殊性最优先,a=1
2.id选择器的特殊性是b,
3.类选择器、伪类选择器、属性选择器为c
4.标签选择器、伪元素选择器为d

CSS优先级:是由四个级别和各级别的出现次数决定的。
四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符。
优先级的算法:

0、0、0、0  每个规则对应一个初始"四位数":					

1、0、0、0  若是 行内选择符,则加	

0、1、0、0  若是 ID选择符,则加	

0、0、1、0  若是 类选择符/属性选择符/伪类选择符,则分别加	

0、0、0、1  若是 元素选择符/伪元素选择符,则分别加	

  算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。


#简洁、高效的css
- 所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素。
 1.不要再ID选择器前使用标签名 input#user
 2.不要在类选择器前使用标签名 input.user , 一个样式类针对不同的标签显示不同的样式 .
 	就可以用: p.colclass{color:red;} 和 span.colclass{color:red;}
 3.尽量少使用层级关系;
 	#divclass p.colclass{color:red;}改为  .colclass{color:red;}
 4.使用类选择器代替层级关系




# 优先级
1、id选择器优先级权重比class选择器大一个数量级,class选择器权重比标签选择器大一个数量级;
2、class选择器和属性选择器同优先级;
3、样式的优先程度需要根据第1条规则计算整体的优先级,按选择器权重计算各条样式规则中所有选择器优先级之和,哪条规则权重大,那条就说了算。如果相同那么后面的覆盖前面的。
4、像这种.dog > p开挂,多了特殊符号的,并不会增加优势,还是和 .dog p优先级一样。
5、css样式优先级还和继承有关,继承的优先级不如本身应用的优先级高。


案例1:
<div id="parent" class="parent">
  <p class="p">p</p>
</div>

 p | .p | div p | .parent | #parent设置color属性,那么优先级如何呢?
结果:  
 .p > div p > p > #parent > .parent
 
id选择器并没用最优先? 因为子级的选择器优先级比父级的选择器优先级高,或者说继承的优先级程度比自身的优先级低!

				

父选择器


目前css还没用实现父元素的选择. 什么时候用到父选择器?

实例: 一个容器内有多个元素. 点击任何一个子元素. 容器的边框进行高亮.
常见实现1:

// 点击了子元素, 通过js给父元素添加新样式类.
$('input').focus(function() {
    $(this).parent().addClass('highlight');
});

纯css实现: 
- 把兄弟元素作为祖先元素使用;
原理:
父级容器只处理结构,不负责外观。
.container {
    min-height: 120px;
    position: relative; z-index: 1;
}
其中,这里的z-index:1用来创建新的层叠上下文,这样子元素的z-index:-1不会超出容器;

HTML:
<div class="container">
    <input id="input" class="input">
    <!-- 下面的label就是新建的负责容器外观的元素 -->
    <label class="border" for="input"></label>
</div>

.border {
    /* 尺寸自适应容器大小,假装是容器 */
    position: absolute; left: 0; right: 0; top: 0; bottom: 0; 
    /* 在输入框的下面 */
    z-index: -1;
    /* 外观模拟 */
    border: 1px solid #bbb;
}

绝对定位元素,如果没有具体的width/height限定,left/right以及top/bottom对立方位的数值会拉伸元素的尺寸。
这里这里,全部都设为0,和.container所在元素组合,就形成了类似宽高100%同时box-sizing:border-box;的效果,
所以,如果你想让IE7浏览器实现类似border-box的盒尺寸计算,某些情况下,就可以使用绝对定位拉伸;

通过相邻兄弟选择器,控制容器的样式变化,CSS代码如下: 
.input:focus + .border {
    /* 容器边框颜色高亮 */
    border-color: #1271E0;    
}

于是乎,当我们focus输入框的时候,那个大大的灰色边框就高亮了!看上去高亮的是外部的容器,实际上是输入框的兄弟元素,这就是上面所说的“把兄弟元素作为祖先元素使用”!



				

实例1

相邻兄弟选择器, 来实现交互效果.

code1 - 早上
code2 - 中午
code3 - 晚上
html
内容1

实例2

html
内容1