CSS复合选择器
#复合选择器
复合选择器概念:在css中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
后代选择器（重要）
后代选择器又称为包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。
基本语法格式: 元素1元素2{样式声明}
注意：
- 元素1和元素2必须用空格隔开
- 元素1是父级元素2是子集，最终选择显示的是元素2
例：现有无序列表与有序列表两组标签，现在我想把无序列表与有序列表两组标签中的小子级选出来修改颜色该如何操作？
html代码如下（示例）：
<body><!--复合选择器，复合选择器是由两个或多个基础选择器，通过不同方式组成的--><!--后代选择器--><ol><li>我是ol的崽</li><li>我是ol的崽</li><li>我是ol的崽</li><li><a href="#">跳转</a></li></ol><ul><li>我是ul的崽</li><li>我是ul的崽</li><li>我是ul的崽</li></ul></body>代码如下（示例）：
<style>/*后代选择器,可以选择父元素里面的子元素，可配合其他任意基础选择器使用*//*把ol里面的li选出来改成红色*/ol li {color: red;}ol li a {color: red;}</style>子选择器（重要）
子选择器只能作为某元素的最近一级子元素，简单理解就是选亲儿子元素
基本语法格式： 元素1>元素2{样式声明}
上述语法表示选择元素1里面的所有直接后代（子元素）元素2.
注意：
- 元素1和元素2必须用大于号隔开
- 元素1是父级元素2是子集，最终选择显示的是元素2
- 元素2必须是亲儿子，其他的无效
例：请将下列第一个链接改为红色
html代码如下（示例）：
<body><!--子选择器--><div class="nav"><a href="#">儿子</a><p><a href="#">孙子</a></p></div></body>代码如下（示例）：
/*子选择器,只能选择作为某元素最近一级子元素*/.nav>a {color: red;}/*并集选择器,可以选择多组标签,同时为他们定义相同样式*//*要求1:把熊大熊二改成蓝色*//*.nav1,p {color: blue;}*//*要求2:把熊大熊二改成蓝色且把小猪一家改成蓝色*/.nav,p,.pig li {color: blue ;}并集选择器（重要）
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
基本语法格式：元素1,元素2{样式声明}
注意：
- 元素1元素2之间用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明
例：
- 要求1：把熊大熊二改成蓝色
- 要求2：把熊大熊二改成蓝色且把小猪佩奇一家
同时改成蓝色
html代码如下（示例）：
<body><!--并集选择器--><div class="nav1">熊大</div><p>熊二</p><span>光头强</span><ul class="pig"><li>小猪佩奇</li><li>猪爸爸</li><li>猪妈妈</li></ul></body>代码如下（示例）：
/*并集选择器,可以选择多组标签,同时为他们定义相同样式*//*要求1:把熊大熊二改成蓝色*//*.nav1,p {color: blue;}*//*要求2:把熊大熊二改成蓝色且把小猪一家改成蓝色*/.nav,p,.pig li {color: blue ;}伪类选择器
伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第1个，第n个元素
伪类选择器书写最大的特点是用冒号(:)表示，比如: hover:first-child
链接伪类选择器注意事项：
- 为了确保生效，请按顺序声明：link:visited :hover :active
- 因为a链接在浏览器中具有默认样式，所以我们在实际工作中都需要给链接单独指定样式
html代码如下（示例）：
<body><!--链接伪类选择器--><a href="#">小猪佩奇</a><a href="#1">大猪乔治</a> <!-- :focus 伪类选择器--> <input type="text" /> <input type="text" /> <input type="text" /><br /><!--css的元素显示模式的转换--><!--行内元素转块级元素--><a href="#2" class="a1">显示模式的转换</a><a href="#2" class="a1">显示模式的转换</a><div class="d1">我是块级元素</div><div class="d1">我是块级元素</div><br /><!--行内元素转换为行内块元素--><span class="s1">行内元素转换为行内块元素</span><span class="s1">行内元素转换为行内块元素</span></body>代码如下（示例）：
/*链接伪类选择器(为了确保生效，请按照LVHA的顺序声明:link :visited :hover :active)*//* a:link 未访问的链接*/a:link {color: #333;/*去除超链接下划线*/text-decoration: none;}/* a:visited 选择点击过的(访问过的)链接*/a:visited {color: orange;}/*a:hover 选择鼠标经过的链接*/a:hover {color: red;text-decoration: underline;}/*a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接*/a:active {color: green;}/*:focus伪类选择器,把获得光标的input表单元素选取出来*/input:focus {background-color: pink;}/*行内元素转块级元素*/.a1{width: 150px;height: 50px;background-color: pink; /*把行内元素a转化为块级元素*/ display: block;}.d1 {width: 300px;height: 100px;background-color: red;/*块级元素转行内元素*/display: inline;}/*行内元素转换为行内块元素*/.s1 {width: 300px;height: 30px;background-color: skyblue;display: inline-block;}