回顾
什么是选择器
在 CSS 中,选择器是选取需设置样式的元素的模式。
选择器的作用
CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。
方便我们对元素添加样式。
层次选择器
基本选择器又分为三种方式:
- 后代选择器
- 子选择器
- 相邻选择器
- 通用选择器
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
<!--标签选择器-->
p{
background: #148aff;
}
/*后代选择器:在选定元素后面的所有某元素*/
body p{
background: deeppink;
}
/*子选择器:在某选定元素后面一代的某元素*/
body>p{
background: red;
}
/*相邻兄弟选择器:对下不对上且不包括自己*/
.action+p{
background: green;
}
/*通用兄弟选择器:对下不对上且不包括自己*/
.active~p{
background: purple;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>
<p class="action">p7</p>
<p>p8</p>
</body>
</html>
效果
小结
层次选择器顾名思义是有层次的感觉,从以上代码不难看出!
作者有话说
博客创作不易,希望看到这里的读者动动你的小手点个赞,如果喜欢的小伙伴可以一键三连,作者大大在这里给大家谢谢了。