CSS3选择器

传统CSS2.1选择器

标签选择器

span {
	color: red;
}
b {
	color: green;
}

• 标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签
• 标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅
• 标签选择器“覆盖面”非常大，所以通常用于标签的初始化

id选择器

• 标签可以有id属性，是这个标签的唯一标识；id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母；同一个页面上不能有相同id的标签
• CSS选择器可以使用井号#前缀，选择指定id的标签

<p id="para1">我是一个段落</p>
#para1 {
	color: red;
}

class选择器

• class属性表示“类名
• 类名的命名规范和id的命名规范相同
• 使用点.前缀选择指定class的标签
• class类名非常灵活，多个标签可以为相同类名

<p class="warning">我是段落</p>
<p class="warning">我是段落</p>
<ul>
	<li>我是列表项</li>
	<li class="warning">我是列表项</li>
	<li>我是列表项</li>
	<li class="warning">我是列表项</li>
</ul>

• 同一个标签可以同时属于多个类，类名用空格隔开

<p class="warning spec">我是段落</p>
.warning {
	color: red;
}
.spec {
/* 文字倾斜 */
	font-style: italic;
}

原子类

• 在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类

.fs12 {
	font-size: 12px;
}
.color-red {
	color: red;
}

• HTML标签就可以“按需选择”它的类名了，这样可以非常快速的添加一些常见样式

复合选择器

选择器名称	示例	示例的意义
后代选择器	.box .spec	选择类名为box的标签内部的类名为spec的标签
交集选择器	li.spec	选择既是li标签，也属于spec类的标签
并集选择器	ul, ol	选择所有ul和ol标签

后代选择器

• CSS选择器中，使用空格表示“后代”

/* 选择类名为box的标签 */
后代的p标签
.box p {
	color: red;
}
<div class="box">
	<p>我是盒子中的段落</p>
	<p>我是盒子中的段落</p>
</div>
<p>我是段落</p>
<p>我是段落</p>

• “后代”并不一定是“儿子”
• 后代选择器可以有很多空格，隔开好几代

.box ul li .spec em {
color: red;
}
<div class="box">
<ul>
	<li>
		<p class="spec">我是段落<em>强调文字</em></p>
	</li>
</ul>
</div>

交集选择器

• 选择有.spec类的h3标签，此时应该使用交集选择器

h3 .spec {
	font-style: italic;
}

• 并集选择器也叫作分组选择器，逗号表示分组

复合选择器

• 选择器可以任何搭配、结合，从而形成复合选择器，我们必须要能一目了然的看出选择器代表的含义

伪类

-伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊状态

伪类	意义
a:link	没有被访问的超级链接
a:visited	已经被访问过的超级链接
a:hover	正被鼠标悬停的超级链接
a:active	正被激活的超级链接（按下按键但是还没有松开按键）

爱恨准则

• a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效

LOVE HATE
:link :visited :hover :active

css3新增选择器

元素关系选择器

名称	举例	意义
子选择器	div>p	div的子标签p
相邻兄弟选择器	img+p	图片后面紧跟着的段落将被选中
通用兄弟选择器	p~span	p元素之后的所有同层级span元素

子选择器

• 当使用 > 符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系
• 后代选择器不一定限制是子元素
• 子选择器从IE7开始兼容

相邻兄弟选择器

• 相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中
• 说白了，a+b就是选择“紧跟在a后面的一个b”
• 相邻兄弟选择器从IE7开始兼容

img+span {
color: green;
}
<p>
	<img src="images/0.jpg" alt="">
	<span>这是北京故宫</span> /*将被选择*/
	<span>这是北京故宫</span>
</p>
<p>
	<img src="images/1.jpg" alt="">
	<span>这是北京鸟巢</span>/*将被选择*/
</p>
<span>你好</span>
<span>你好</span>

通用兄弟选择器

• 通用兄弟选择器（~），a~b选择a元素之后所有同层级b元素
• 通用兄弟选择器从IE7开始兼容

h3~span {
font-style: italic;
}
<span>我是后面的span</span>
<h3>我是一个三级标题</h3>
<span>我是后面的span</span>/*将被选择*/
<span>我是后面的span</span>/*将被选择*/
<span>我是后面的span</span>/*将被选择*/
<span>我是后面的span</span>/*将被选择*/
<p>我是一个段落</p>
<span>我是后面的span</span>/*将被选择*/
<span>我是后面的span</span>/*将被选择*/
<div>
	<span>多了一个级别span</span>
	<span>多了一个级别span</span>
</div>

序号选择器

举例	意义
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(3)	第3个子元素
:nth-of-type(3)	第3个某类型子元素
:nth-last-child(3)	倒数第3个子元素
:nth-last-of-type(3)	倒数第3个某类型子元素

• :first-child表示“选择第一个子元素”，比如下面的例子就表示选择.box1盒子中第一个p

.box1 p:first-child {
color: red;
} 
<div class="box1">
	<p>1</p>/*将被选择*/
	<p>2</p>
	<p>3</p>
	<p>4</p>
</div>

• :last-child表示“选择最后一个子元素”，比如下面的例子就表示选择.box1盒子中最后一个p

.box1 p:last-child {
color: red;
}
<div class="box1">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>/*将被选择*/
</div>

• :nth-child()可以选择任意序号的子元素

.box2 p:nth-child(3) {
color: green;
}
<div class="box2">
	<p>1</p>
	<p>2</p>
	<p>3</p>/*将被选择*/
	<p>4</p>
</div>

层叠性和选择器权重计算

层叠性

• CSS全名叫做“层叠式样式表”，层叠性是它很重要的性质
• 层叠性：多个选择器可以同时作用于同一个标签，效果叠加
• 层叠性：多个选择器可以同时作用于同一个标签，效果叠加

层叠性的冲突处理

如果多个选择器定义的属性有冲突呢？CSS有严密的处理冲突的规则: id权重 > class权重 > 标签权重

复杂选择器权重计算

• 复杂选择器可以通过（id的个数, class的个数, 标签的个数）的形式，计算权重

<div id="box1" class="box1">
	<div id="box2" class="box2">
		<div id="box3" class="box3">
			<p>我是段落</p>
		</div>
	</div>
</div>
#box1 #box2 p { /* (2,0,1)*/
	color: red;
}
#box1 div.box2 #box3 p { /*(2,1,2)*/
	color: green;
}
.box1 .box2 .box3 p { /* (0,3,1)*/
	color: blue;
}

!important提升权重

• 如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important
• 很多公司不允许使用!important，因为这会带来不经意的样式冲突