复合选择器
概述:由两个或多个基础选择器通过不同的方式组合而成的选择器
常用复合选择器
后代元素选择器
语法: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.可以与其他选择器结合灵活使用