前端学习-css3中的选择器

总结

（选择器的详细介绍在总结的下方）
1.关系选择器
>： 选择后代 多个为多级后代 (较常用)
+ ：选择同级的下一个，不能为多级。同时其他选择器的条件也要遵守
~ ：后面的所有同级，同时其他选择器的条件也要遵守
格式：

标签或类或id>标签或类或id{
}

2.属性选择器
[属性名] :表示标签中包含属性名的
[属性名 = "属性值"]：表示标签中包含属性名 = "属性值"的
[属性名 ^= "自定义值"] :表示标签中属性值以自定义值开头的
[属性名 $= "自定义值"] ：表示标签中属性值以自定义值结尾的
[属性名 *= "自定义值"] ：表示标签中属性值中含有自定义值字符的
[属性名~= "自定义值"] ：表示标签中属性值包含独立的自定义值的
格式：

标签或类或id+[ ]{
}

符合前面的选择器的同时，还要符合[ ]里的条件

3.伪类选择器
(较常用)
用后代选择：

站在父元素的角度上选中第1个子元素，且该子元素刚好是父素元素下的第1个元素。

fist-child:

站在父元素的角度上选中最后一个子元素，且该子元素刚好是父素元素下的最后一个元素。

last-child:

选中当前子元素，且该子元素是它父元素下的唯一一个子元素

only-child:

站在父元素的角度上选中第（）个子元素
（）中可以使用数字，或者使用odd来底部奇数，用even来代表偶数，还可以使用字母为n的表达式，n代表0到无穷大的整数。如：3n+1 ，则选择的是第1个，第4个，第7个······

nth-child():

用类型选择：

站在父元素的角度上选中第1个该类型的子元素。
fist-of-type:
站在父元素的角度上选中最后1个该类型的子元素。
last-of-type:
选中当前子元素，且该子元素是它父元素下的唯一一个该类型的子元素
only-of-type:
站在父元素的角度上选中第（）个该类型的子元素
（）中可以使用数字，或者使用odd来底部奇数，用even来代表偶数，还可以使用字母为n的表达式，n代表0到无穷大的整数。如：3n+1  ，则选择的是第1个，第4个，第7个······
nth-of-type():

4.状态选择器

 focus伪类    
获取焦点状态
 checked伪类  
选中状态 
 arget伪类  
通常用在a标签中,当单击a标签,目标到某个元素时,执行target伪类

一.关系选择器

1.目标的一级的后代标签

目标的一级的后代标签   (使用场景较多)

.box>p{
	border:1px solid red;
}
 
.box2>ul>li{
	border:1px solid red;
}
 

2.目标的紧挨着的下一个(符合标准的选择器)

目标的紧挨着的下一个(符合标准的选择器)


 h2+.one{
    border:1px solid red;
} 

3.目标后面的所有同级(符合标准的选择器)

目标后面的所有同级(符合标准的选择器)
h2~p{
	border:1px solid red;
}

二.属性选择器

标签或类或id+[ ]{

}
符合前面的选择器的同时，还要符合[ ]里的条件

1.符合属性名的

[class] 表示必须包含class属性名

符合前面的选择器的同时，还要包含[ ]里的属性名
例：

 .list li[class]{
	color:red;
} 
<ul class="list">
	<li class="box">炒肝</li>
	<li id="boxzzz">卤煮</li>
</ul>
 符合前面的选择器的同时，还要符合[ ]里的条件，即：属性class
 所以，只有炒肝的字体颜色变为了红色

2.标签中包含属性值的

[class ="box"] 表示class属性值是box
符合前面的选择器的同时，还要包含[ ]里的属性值
例：

 .list li[class ="box"]{
				color:red;
} 
<ul class="list">
	<li class="box">炒肝</li>
	<li class="boxzzz">卤煮</li>
</ul>
符合前面的选择器的同时，还要符合[ ]里的条件，即：属性值class="box"
 所以，只有炒肝的字体颜色变为了红色

3.····属性值用····开头的

[class ^= "box"] 表示 class属性值用box开头

符合前面的选择器的同时，还要符合[ ]里的条件
例：

[class ^= "box"] 表示 class属性值用box开头
.list li[class ^= "box"]{
	color:red;
} 
<ul class="list">
	<li class="box">炒肝</li>
	<li class="boxzzz">卤煮</li>
</ul>
符合前面的选择器的同时，还要符合[ ]里的条件，即：class属性值用box开头
 所以，炒肝和卤煮的字体颜色都变为了红色

4.····属性值用····结尾的

[class $= "box"] 表示class属性值用box结束

符合前面的选择器的同时，还要符合[ ]里的条件
例：

[class $= "box"] class属性值用box结束的
.list li[class $="box"]{
	color:red;
} 
<ul class="list">
	<li class="box">炒肝</li>
	<li class="boxzzz">卤煮</li>
    <li class="adbox">豆腐</li>
</ul>
符合前面的选择器的同时，还要符合[ ]里的条件，即：class属性值用box结尾
 所以，只有炒肝和豆腐的字体颜色变为了红色

5.···属性值包含···的

[class *= "box"] 表示class属性值中包含box字符

符合前面的选择器的同时，还要符合[ ]里的条件
例：

 [class *= "box"] class属性值中包含box的
 .list li[class *= "box"]{
	color:red;
}
<ul class="list">
	<li class="box">炒肝</li>
	<li class="boxzzz">卤煮</li>
    <li class="adbox">白菜</li>
</ul>
符合前面的选择器的同时，还要符合[ ]里的条件，即：class属性值中包含box
 所以，炒肝,卤煮和白菜的字体颜色都变为了红色

5.····属性值用····结尾的

[class ~= "box"] 表示class属性值中包含独立单词box

符合前面的选择器的同时，还要符合[ ]里的条件
例：

[class ~= "box"] class属性值中包含独立单词box的
.list li[class ~= "box"]{
	color:red;
}
<ul class="list">
	<li class="box">炒肝</li>
	<li class="boxzzz">卤煮</li>
    <li class="box  one">白菜</li>
</ul>
符合前面的选择器的同时，还要符合[ ]里的条件，即：class属性值中包含独立单词box
 所以，只有炒肝和白菜的字体颜色变为了红色

三.伪类选择器

1.会受其他标签影响的

符合条件的标签生效，不符合条件的标签无反应

1.1
站在父元素的角度上选中第1个子元素，且该子元素刚好是父素元素下的第1个元素。

案例如下

但：若父元素的第一个子元素不是li则该选择器失效
.box li:first-child{
	color:red;
} 

1.2
站在父元素的角度上选中最后一个子元素，且该子元素刚好是父素元素下的最后一个元素。

案例如下

但：若父元素的最后一个子元素不是li则该选择器失效
.box li:last-child{
    color:red;
} 

1.3
站在父元素的角度上选中符合相应编号条件的子元素，且该子元素刚好是父素元下的第 编号 个元素

(odd 奇数编号 even 偶数编号 2n+1 表达式,字母必须是n)
案例如下：

.box li:nth-child(1){
	color:red;
	background: yellow;
 }
但：若父元素的第一个子元素不是li则该选择器失效


.box li:nth-child(odd){
	color:red;
	background: yellow;
}
但：若父元素的奇数元素有不是li的，则标签为li的生效，不是li标签的字体颜色和背景无反应

.box li:nth-child(even){
	color:red;
	background: green;
} 
 但：若父元素的偶数元素有不是li的，则标签为li的生效，不是li标签的字体颜色和背景无反应

 .box li:nth-child(2n+1){
	color:red;
}

符合条件的标签生效，不符合条件的标签无反应

1.4.
box li:nth-last-child(1) 从后面开始选择
同样可以使用 (odd 奇数编号 even 偶数编号 2n+1 表达式,字母必须是n)
和上面的用法一致只不过它是从后向前选择

.box li:nth-last-child(1){
	color:red;
}

1.5
选中当前子元素，且该子元素是它父元素下的唯一一个子元素

 .box2 span:only-child{
	color:blue;
} 
当前子元素中有且只有该元素唯一一个元素时生效

2.不会受其他标签的影响的

和上面的区别在于需要限制元素类型。
(odd 奇数编号 even 偶数编号 2n+1 表达式,字母必须是n)
即：of-type
例：

限制类型从后向前选择相应编号的元素。
.box li:nth-of-type(odd){
	color:red;
}

.box li:nth-last-of-type(1){
	color:red;
}
			
			
选中当前子元素，且该子元素是它父元素下唯一类型的这个元素。
 .box2 span:only-of-type{
	color:blue;
}

四.状态选择器

1. focus伪类

获取焦点状态
input[type="text"]:focus{
	background: green;
	color:yellow;
}

2. checked伪类

选中状态 
input[type="checkbox"]:checked{
	background: yellow;
}

3 . arget伪类

通常用在a标签中,当单击a标签,目标到某个元素时,执行target伪类
.box p:target{
	width: 100px;
	height: 100px;
	background: red;
}
此时因为点击a标签而跳转的p标签会变为红色100*100像素的状态
再次点击其他的a标签跳转到其他的标签后，该p标签恢复原来的状态