关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关系选择器</title>
<style>
/*
为div的子元素span设置一个字体颜色为红色
(为div直接包含的span设置一个字体颜色)
子元素选择器:
作用:选中指定父元素的指定子元素
语法:父元素>子元素
*/
/* div.box>span{
color:red;
} */
/*
div>p>span{
color:gold;
} */
/*
后代选择器:
作用:选中指定元素内的指定后代元素
语法:祖先 后代(二者中间是空格)
*/
/* div span{
color:skyblue;
} */
/*
选择下一个兄弟:
语法:前一个+下一个
*/
/* p+span{
color:pink;
} */
/*
选择下边所有兄弟:
语法:兄~弟
*/
/* p~span{
color:pink;
} */
</style>
</head>
<body>
<div class="box">
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span元素</span>
</p>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
<div><span>我是div外的span元素</span></div>
</body>
</html>
** 子元素选择器 运行结果为:**
** 后代选择器 运行结果为:**
选择下一个兄弟 运行结果为:
** 选择下边所有兄弟 运行结果为:**