CSS
复合选择器
概述:由两个或多个基础选择器通过不同的方式组合而成的选择器
后代元素选择器
- 语法:
E F {
样式声明;
}
- 描述:【空格】连接一个或多个选择器
- 作用: 选择E元素内部包含的所有F元素
- 代码示例:
.box span{
background-color:red;
}
<div class="box">
<span>span1是子元素</span>
<p>
<span>span2是子元素的子元素</span>
</p>
</div>
//.box内部的所有span变成了红色,包含在.box内部的通称为后代
子元素选择器
- 语法
E > F {
样式声明;
}
- 描述:【大于】号 连接一个或多个选择器
- 作用: 选择E元素内部包含的所有直接子元素F(第一嵌套层级)
- 实例演示:
.box > span{
background-color:red;
}
<div class="box">
<span>span1是子元素</span>
<p>
<span>span2是子元素的子元素</span>
</p>
</div>
/*只有span1变成了红色*/
相邻选择器
- 语法:
E + F {
样式声明;
}
- 描述:【加号】连接一个或多个选择器
- 作用: E元素之后紧跟着的兄弟元素F
- 实例演示:
.box + p{
background-color:red;
}
<p>这个P元素不会被应用样式</p>
<div class="box">box</div>
<p>这个P元素会被应用样式</p>
<p>这个P元素不会被应用样式</p>
交集选择器
- 语法
E.F {
样式声明;
}
- 描述:【无连接符】
- 作用:选择同时被所有选择器交集选中的元素
- 实例演示:
p.box{
background-color:red;/*只对div有效*/
}
<p class="box">这个元素会被应用样式</p>
<div class="box">这个元素不会被应用样式</div>
并集选择器
- 语法
E,F {
样式声明;
}
- 描述:【逗号】连接一个或多个选择器
- 作用: 使用逗号分隔的列表来对选择器进行分组,给列表中每一个选择器选中的元素设置样式
/*不使用并集选择器*/
.box{
color:Red;
}
div{
color:red;
}
#test{
color:red;
}
<p class="box">p1</p>
<div>div</div>
<span id="test">span</span>
/*使用并集选择器——精简代码*/
.box,div,#test{
color:red;
}
伪类选择器
超链接的四种状态伪类
- 语法:【冒号:】连接
a:link{ css样式 } //链接未被访问
a:visited{ css样式 } //链接被访问过后
a:hover{ css样式 } //链接被鼠标悬停
a:active{ css样式 } //链接被激活(鼠标按下不抬起时)
- 总结:
- 注意书写顺序 l-v-h-a
- 实际工作中最常用的是:hover
- 可以与其它选择器结合灵活使用
- 实例演示
.box a:hover{ color:red; } .box内部的a鼠标滑过时
.abox:hover {color:green;} .abox鼠标滑过时
.abox:hover > span{color:red;} .abox滑过时它内部的直接子元素span