前端初识到入门：CSS常用复合选择器

复合选择器

概述：由两个或多个基础选择器通过不同的方式组合而成的选择器

常用复合选择器

后代元素选择器

语法：E F{ 样式声明 }    空格连接一个或多个选择器

作用：选择E元素内部包含的所有F元素

代码示例：

.box a{
    color:red;
}

子元素选择器

语法：E>F{ 声明样式 }    >大于号 连接一个或多个选择器

作用：选择E元素内部包含的所有直接子元素F

代码示例：

.box > a{
	color:Red;
}

<div class="box">
	<a href="#">这个a会被应用样式</a>
	<p>
		<a href="#">这个a不会被应用样式</a>
	</p>
</div>

相邻选择器

语法：E+F{ 样式声明 }  +加号  连接一个或多个选择器

作用：E元素之后紧跟着的兄弟元素F

代码示例：

.box + p{
	background-color:red
}

<p>这个P元素不会被应用样式</p>
<div class="box">box</div>
<p>这个P元素会被应用样式</p>

交集选择器

语法：E.F{ 样式声明 }  无连接符

作用：选择同时被所有选择器交集选中的元素

代码示例

p.box{
	background-color:red
}

<p class="box">这个元素会被应用样式</p>
<div class="box">这个元素不会被应用样式</div>

并集选择器

语法：E,F{ 样式声明 }   逗号 连接一个或多个选择器

作用：使用逗号分隔的列表来对选择器进行分组，给列表中每一个选择器选中的元素设置样式

代码示例：

.a,.b{
         width:100px;
         height: 100px;
     }

<div class="a"></div>
<div class="b"></div>

伪类选择器

超链接的四种状态伪类

语法： ：冒号标识

代码示例

a:link{ css样式 }链接未被访问
a:visited{ css样式 }链接被访问过后
a:hover{ css样式 }链接被鼠标悬停
a:active{ css样式 }链接被激活（强调鼠标按下抬起）

伪类选择器的总结事项：

1.书写顺序：l-h-v-a

2.实际工作中最常用的是hover

3.可以与其他选择器结合灵活使用