<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关系选择器</title>
<style>
/*
一、关系选择器：利用标签之间的关系选中指定的元素。
1.子元素选择器
语法格式
父元素A > 子元素B{
——
}
作用：选中指定父元素所有的子元素B
2.后代元素选择器
语法格式
祖先元素A 后代元素B{
——
}
作用：选中指定祖先元素A中所有的后代元素B
3.兄弟元素选择器
1）相邻兄弟选择器
语法格式
兄弟A+兄弟B{
——
}
作用：选中兄弟A相邻的一个兄弟B标签
2）通用兄弟选择器
语法格式
兄弟A~兄弟B{
——
}
作用：选中兄弟A后面所有的兄弟B元素
*/
ul>li{
color: red;
font-size: 20px;
}
div span{
color: blue;
}
ul+span{
background-color: #7edcc7;
}
ul~span{
background-color: #fde6e0;
}
</style>
</head>
<body>
<!--
标签之间的关系：标签之间创建另一对标签，外面的标签为父标签，里面的标签为子标签
标签的一层层父级标签，统称为祖先标签
标签的一层层子级标签，统称为后代标签
同一个层级的标签之间，统称为兄弟标签
-->
<div>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3
<span>我是span</span>
</li>
</ul>
<div></div>
<span>我是span</span>
<span>我是小span</span>
</div>
<ol>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)