<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
#p1 h1{
/*
后代选择器
用法 - 祖先 空格 后代 {声明块}
*/
color: lightcoral;
}
div > h1{
/*子选择器
用法 -》 父级 -》子级 {声明块}
*/
color: #55a532;
}
#p1 + h1{
/*
相邻兄弟选择器
用法 - 兄 + 弟 {声明块}
作用 匹配指定元素的下一个相邻的兄弟元素
*/
color: aquamarine;
}
#p1 ~ h1{
/*
普通兄弟选择器
用法 - 兄 ~ 弟 {声明块}
作用 匹配指定元素的后面的所有兄弟的元素
*/
color: aquamarine;
}
</style>
</head>
<body>
<div id="p1">
<h1>
Hello Michael
</h1>
你好大师
</div>
</body>
</html>