层级选择器
目录
选择器结构
层次结构
- A与B、B1是父子级关系
- C11和C12与B是父子级关系，C2和B1是父子级关系
- B与B1是兄弟关系
- A与C11、C12和C2是后代关系，同样B和B1也是A的后代关系
- C11与C12是兄弟关系但是同C2不是兄弟关系
后代选择器
语法结构
选择器 选择器的后代元素的后代节点{
语法
}
使用空格分离
- 通过后代结构器使A下面的所有后代都变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewport"content="width=device0-width,initial-scale=1.0">
<title>练习</title>
<style>
a .hahaha{
color:pink;
}
</style>
</head>
<body>
<a>这是大哥</p>
<b class="hahaha">这是小弟1号</p>
<c11 class="hahaha">
这是弟中弟1号</p>
</c11>
<c12 class="hahaha">
这是弟中弟2号</p>
</c12>
</b>
<b1 class="hahaha">这是小弟2号</p>
<c2 class="hahaha">
这是弟中弟3号</p>
</c2>
</b1>
</a>
</body>
</html>
- 代码效果
效果图
子级选择器
语法结构
选择器>选择器的后代元素的子级节点{
语法
}
使用右尖括号>分离
- 示例 将小弟变成红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewport"content="width=device0-width,initial-scale=1.0">
<title>练习</title>
<style>
a>.hahaha{
color:red;
}
</style>
</head>
<body>
<a>这是大哥</p>
<b class="hahaha">这是小弟1号</p>
<c11 class="hahaha">
这是弟中弟1号</p>
</c11>
<c12 class="hahaha">
这是弟中弟2号</p>
</c12>
</b>
<b1 class="hahaha">这是小弟2号</p>
<c2 class="hahaha">
这是弟中弟3号</p>
</c2>
</b1>
</a>
</body>
</html>
- 代码效果
效果图
弟中弟变色的原因是因为color存在着继承，所以才会变色
相邻兄弟选择器
语法结构
选择器+选择器的相邻元素的兄弟节点{
语法
}
使用加号+分离
- 将弟中弟1号的相邻兄弟变个色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewport"content="width=device0-width,initial-scale=1.0">
<title>练习</title>
<style>
c11+.hahaha{
color:green;
}
</style>
</head>
<body>
<a>这是大哥</p>
<b class="hahaha">这是小弟1号</p>
<c11 class="hahaha">
这是弟中弟1号</p>
</c11>
<c11 class="hahaha">
这是弟中弟2号</p>
</c11>
<c11 class="hahaha1">
这是弟中弟4号</p>
</c11>
</b>
<b1 class="hahaha">这是小弟2号</p>
<c2 class="hahaha">
这是弟中弟3号</p>
</c2>
</b1>
</a>
</body>
</html>
- 代码效果
效果图
x'g
普通兄弟选择器
语法结构
选择器~选择器的相邻元素的兄弟节点{
语法
}
使用波浪号~分离
- 将弟中弟1号的兄弟变个色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8">
<meta name="viewport"content="width=device0-width,initial-scale=1.0">
<title>练习</title>
<style>
c11~c11{
color:blue;
}
</style>
</head>
<body>
<a>这是大哥</p>
<b class="hahaha">这是小弟1号</p>
<c11 class="hahaha">
这是弟中弟1号</p>
</c11>
<c11 class="hahaha">
这是弟中弟2号</p>
</c11>
<c11 class="hahaha1">
这是弟中弟4号</p>
</c11>
</b>
<b1 class="hahaha">这是小弟2号</p>
<c2 class="hahaha">
这是弟中弟3号</p>
</c2>
</b1>
</a>
</body>
</html>
- 代码效果
效果图
