<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
为div的子元素span设置一个字体颜色红色
(为div直接包含的span设置一个字体颜色)
子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素 > 子元素
*/
div > span{
color: orange;
}
/*
后代选择器
作用:选中指定元素内的指定后代元素
语法:祖先 后代
*/
div span{
color: skyblue;
}
/*
选择下一个兄弟
语法:前一个 + 下一个
x选择下边所有的兄弟
语法:兄 ~ 弟
*/
p + span{
color: yellow;
}
p ~ span{
color: pink;
}
</style>
</head>
<body>
<!--
父元素
直接包含子元素的元素叫做父元素
子元素
直接被父元素包含的元素叫做子元素
祖先元素
直接或间接包含后代元素的元素叫做祖先元素
一个元素的父元素也是他的祖先元素
后代元素
直接或间接被祖先元素包含的元素叫做后代元素
兄弟元素
拥有相同父元素的元素叫做兄弟元素
-->
<div>
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
<span>我是div外的span</span>
<div>
<span>我是div外的span</span>
</div>
</body>
</html>
前端——关系选择器
最新推荐文章于 2023-12-07 07:11:21 发布