复合选择器是什么？
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器基础之上的，对基本选择器进行组合形成的。
复合选择器可以更准确，更高效地选择目标元素（标签） 复合选择器是由两个或者多个基础选择器，通过不同的方式组合而成的。 常用的复合器包括：后代选择器，子选择器，并集选择器，伪类选择器等等。
为什么要引入复合选择器？
举例：
要求将ul中的li标签中的元素修改
<head> <style> li{ font-size: 20px; font-family: "仿宋"; } </style> </head> <body> <ul> <li>早上好</li> <li>中午好</li> <li>下午好</li> </ul> <ol> <li>你好</li> <li>我好</li> <li>大家好</li> </ol> </body>
类似于上面的这种情况是很常见的，如果我们使用基础选择器，直接使用li标签对齐进行筛选，结果就是如下图所示，无论是ol中的li标签还是ul中的li标签元素都被修改了。
显示：
那么有的人会说，可以使用如下所示这种方式通过类选择器进行，这种方法
虽然没错，但是非常麻烦，十几行代码看不出，但是几十行甚至几百行呢？如果还去手动的添加，效率就非常低。
<head> <style> .t{ font-size: 20px; font-family: "仿宋"; } </style> </head> <body> <ul> <li class="t">早上好</li> <li class="t">中午好</li> <li class="t">下午好</li> </ul> <ol> <li>你好</li> <li>我好</li> <li>大家好</li> </ol> </body>
显示：
此时，复合选择器的好处就体现的淋漓尽致了，下面我们来感受一下它的魅力！
后代选择器：
后代选择器又称为包含选择器，可以选择父元素中的子元素，其写法为：把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。
语法格式：
元素1 元素2{样式声明}//表示选择元素1[称为父元素]中的所有元素2[称为子元素]
例如：
ul li{样式声明} //选择ul中所有的li标签元素
注意：
元素1和元素2中间用空格隔开
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
元素1和元素2可以是任意基础选择器
举例：
<head> <style> body .t {//选择body标签中，类选择器为t的元素 font-family: "仿宋"; } </style> </head> <body> <ul> <li>我是ul的儿子</li> <li><a href="http:\\xysfxy.com" />我是ul的孙子</a></li> </ul> <p class="t">你好web</p> </body >
显示如下：
选择直接后代元素：
上述实例进行修改：
<style> ul li{ font-size: 20px; font-family: "仿宋"; } </style>
对上述实例选用后代选择器，只需要更改几个简单的字母即可，与上述方法中的类选择器相比两者都可正确显示效果，但这种方式方便了许多。
选择非直接后代元素：
举例：
<head> <style> ul li a{//将ul中的li中的a标签该为红色 color:aquamarine; } </style> </head> <body> <ul> <li >我是ul的儿子</li> <li><a href="http:\\xysfxy.com"/>我是ul的孙子</a></li> </ul> </body>
显示：
子选择器：
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，它不像后代选择器一样可以选择“儿子”/"孙子”等，他只能选择“儿子”。
语法格式：
元素1>元素2{样式声明}//选择元素1 里面的所有直接后代元素（子元素）元素2
例如：
div>p{样式说明}//选择div里面所有最近一级p标签元素
元素1和元素2中间用">"隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子，其余的后代均不可以
举例：
要求：将li中的a标签进行修改：
方法1：
<head> <style> ul>a{ font-family: "微软雅黑"; font-size: 30px; } </style> </head> <body> <ul> <li>我是ul的儿子</li> <li><a href="http:\\xysfxy.com" />我是ul的孙子</a></li> </ul> </body >
方法1:是错误的，它并不能实现对应的功能，因为 ul>a：a并不是ul的直接后代，所以不能使用子选择器进行选择。
方法2：
<head> <style> ul>li>a{ font-family: "微软雅黑"; font-size: 30px; } </style> </head> <body> <ul> <li>我是ul的儿子</li> <li><a href="http:\\xysfxy.com" />我是ul的孙子</a></li> </ul> </body >
方法二是对的，ul>li>a：li是ul的后代，而a又是li的后代，因此可以通过子选择器进行修改。
并集选择器：
并集选择器可以选择多组标签，同时为它们定义相同的样式，通常用于集体声明。
并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法格式：
元素1， 元素2{样式声明}//选择元素1和元素2
在并集选择器中，多个被选择的元素，我们一般都习惯将它们竖着表示，最后一个被选择的元素后面不需要加逗号
例如：
ul,div{样式声明}//选择ul和div标签元素
元素1和元素2中间用逗号隔开
举例：
<head> <style> li, p, a{//将li和p以及a标签中元素都进行修改 font-family: "微软雅黑"; font-size: 10px; color:blueviolet } </style> </head> <body> <ul> <li>我是ul的儿子</li> </ul> <p>我是p标签</p> <a href="http://us.com">我是超链接</a> </body >
显示如下：
伪选择器：
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊的效果，或选择第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示，比如：hover，first-child
常见的伪类选择器有：链接伪类，结构伪类。
链接伪类选择器：
a:link //选择所有未被访问的链接 a:visited //选择所有已被访问的链接 a:hover //选择鼠标指针位于其上的链接 a:active //选择活动链接(鼠标按下未弹起的链接）
举例：
<style> a:link{color:black;text-decoration: none;}//未访问过的链接 a:visited{color:aquamarine;}//访问过的链接 a:hover{color:blueviolet;} //鼠标时经过的链接 a:active{color:green;}//鼠标正在按下还为弹起的那个链接 </style>
选择链接伪类选择器的注意事项：
1:为了确保生效，必须遵守：link--->visted--->hover--->active的顺序进行定义和声明 2：由于a链接在浏览器中有默认的样式，所以一般情况下都需要我们给a标签指定单独的样式。
链接伪类选择器在实际开发中的写法：
a{ color:gray; } a:hover{ color:red;//鼠标经过时，由最初的灰色变为了红色 }
.focus选择器：
将获得光标的input表单元素选取出来
举例：
<head> <style> input:focus{ background-color: aquamarine; } </style> </head> <body> <input type="text"> <input type="text"> </body >
显示效果：
复合选择器总结：
