复合选择器--总结

常用的复合选择器:

1.后代(使用频率90%-95%)
2.子代
3.并集
4.交集
5.链接伪类选择器
6.结构伪类选择器
7.属性选择器

如何利用选择器去选择器元素
1.确定我们要选择的元素
2.从HTML结构中根据我们确定的元素,找这个元素的父辈元素
3.根据父辈元素来选择使用哪一个选择器(一定只能是给当前选择的元素
添加样式,不要给其他的元素添加样式,要精准选择)

后代选择器:

	    
				选择器1 选择器2 选择器3 选择器4 ....{
					属性:属性值;
				}

子代选择器:

				只能选择儿子这一代
				选择器>选择器2>选择器3>选择器4...		
					
				选择器1,选择器2,选择器3.....都是我们类选择器或者标签选择器
				p span{
					color:yellow;
				}
				.son span {
					color:green;
				}
				.father p span{
					color:red;
				}

并集选择器:

			选择器1,选择器2,选择器3,选择器4,....{
				属性:属性值
			}
			如果在页面中有2个或者多个元素的有相同的样式的时候,我们可以使用并集选择器
				并集选择器在样式初始化的时候使用1的非常多
			.one,span,a,em{
				color:pink;
			}
			.one,span,a,em,.father .son a>ins{
				color:blue;
			}	

复合选择器:

		将基础选择器以一种方式链接组成的一个新的选择器
		复合选择器几乎都是有类选择器和标签选择器组成

交集选择器:

			
			选择器1选择器2选择器3选择器4...{
				属性:属性值;
			}
			p.ont{
				color:pik;
			}
			注意:如果交集选择器中存在有标签选择器,标签选择器一定要写在最前面
			

链接伪类选择器

				:link     只对a标签有效                   
				:visited  只对a标签有效
				:hover    对几乎所有的标签都有效    鼠标移入变颜色
				:active   对几乎所有的标签都有效    点击后变颜色
			
			目标伪类选择器
				:target{
					属性:属性值		
				}
			

结构伪类选择器:

			结构伪类选择器:是从HTML的结果上面来确定元素的位置
			E:first-child E:表示选择的这个孩子元素
			li:first-child{
				color: pink;
			}
			E:last-child 
			选择任何孩子元素的写法
			E:nth-child(n) n表示的是我们选择的是第几个孩子元素,和这个元素本身是什么无关
			
			如何确定n的值是多少?
			1.确定要选择的元素
			2.根据确定的元素找到其父元素
			3.找到这个父元素下面与我们要选择的元素时兄弟关系的所有元素
			4.确定我们要选择的元素在这些兄弟元素中排老几,那么n就是几

属性选择器

			属性选择器:根据元素的属性来选择元素 css中使用[]来标示元素
			
			E[attr="val"]: E:表示要选择的元素  attr表示元素的属性  val:表示属性的值
			
			input[type="password"]{
				width:200px;
				height:200px;
			}