复合选择器是什么？
在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 >
显示如下：
![在这里插入图片描述](https://img-blog.csdnimg.cn/2ac48177fed64360a0ca7f9ceb7315cc.png
选择直接后代元素：
上述实例进行修改：
<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 >
显示效果：
复合选择器总结：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/81416.html
