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&