复合选择器

希望大家能够持续关注、点赞以及评论我的博客，以及我的博客网站，一起交流更多的IT技术！！！不负韶华，砥砺前行！酒涩博客-专属你的IT交流博客！

在CSS中，根据选择器的类型将选择器分为基础选择器和复合选择器，组合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

1、后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开。当标签发生嵌套时，内层标签就称为外层标签的后代。

元素1  元素2 {    
    样式声明       
 }

选择元素1里面的所有元素2（后代元素）

• 元素1和元素2之间用空格隔开

• 元素1为父元素，元素2为子元素

案例：

css:
ol li {
	color: red;
}
语义为选择html标签ol里面的所有li进行样式的修改
html:
<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>

2、子选择器

子元素选择器只能选择作为某元素的最近一级子元素。

语法：

元素1>元素2{
	样式
}

选择元素1里面的所有子元素

div>p {
	样式
}
语义为选择div里面的最近一级P元素进行修改

• 元素之间用>号隔开

• 元素1是父级，元素2是子级，最终选择元素2进行修改

• 元素2为子级，只能修改子级，不能修改孙级。

3、并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，任何基础选择器都可以使用。

ul，div {
     样式
}

语义：选择ul和div

• 元素1和元素2之间用，号隔开

• 通常用于集体声明

4、伪类选择器、

• 伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果或者选择第一个，第n个元素。

• 最大的特点是用：号。

• 伪类选择器分类：链接伪类，结构伪类等

4.1、链接伪类选择器、

选择器	作用
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择属性指针位于其上的链接
a:active	选择鼠标按下未弹起的链接

• 为了确保生效，按照link，visited，hover，active顺序书写。

• a链接标签在浏览器中有默认的样式，若修改样式必须给a单独指定。

• 在实际开发中一般只定义link和hover。

5、focus伪类选择器

此选择器用于选取获得光标所在的表单元素。一般用于中

选择光标所在的表单元素，进行修改样式。
input：focus {
	样式
}