1、复合选择器
概述:由两个或多个基础选择器通过不同的方式组合而成的选择器
1.1 后代元素选择器
-
语法:
E F { 样式声明; }
-
描述:【空格】连接一个或多个选择器
-
作用: 选择E元素内部包含的所有F元素
-
代码示例:
.box span{ background-color:red; } <div class="box"> <span>span1是子元素</span> <p> <span>span2是子元素的子元素</span> </p> </div> //.box内部的所有span变成了红色,包含在.box内部的通称为后代
1.2 子元素选择器
-
语法
E > F { 样式声明; }
-
描述:【大于】号 连接一个或多个选择器
-
作用: 选择E元素内部包含的所有直接子元素F(第一嵌套层级)
-
实例演示:
.box > span{ background-color:red; } <div class="box"> <span>span1是子元素</span> <p> <span>span2是子元素的子元素</span> </p> </div> /*只有span1变成了红色*/
1.3 相邻选择器
-
语法:
E + F { 样式声明; }
-
描述:【加号】连接一个或多个选择器
-
作用: E元素之后紧跟着的兄弟元素F
-
实例演示:
.box + p{ background-color:red; } <p>这个P元素不会被应用样式</p> <div class="box">box</div> <p>这个P元素会被应用样式</p> <p>这个P元素不会被应用样式</p>
1.4 交集选择器
-
语法
E.F { 样式声明; }
-
描述:【无连接符】
-
作用:选择同时被所有选择器交集选中的元素
-
实例演示:
p.box{ background-color:red;/*只对div有效*/ } <p class="box">这个元素会被应用样式</p> <div class="box">这个元素不会被应用样式</div>
1.5 并集选择器
-
语法
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; }
1.6 伪类选择器
超链接的四种状态伪类
-
语法:【冒号:】连接
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