CSS 权威指南 笔记利用元素之间关系的选择器
文档结构
如果把 html 文档比作文件系统，文档元素是一个个子文件夹，那么根元素 html 看做根目录。
可以想象一下用鼠标层层点开 html 文件夹的情景。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1></h1>
<p>
<span><em>1</em></span>
<span><em>2</em></span>
</p>
</body>
</html>h1 元素 html>body>h1p 元素 html>body>p
元素之间关系
- 祖先
html元素是整个文档的祖先。body是浏览器默认显示的所有元素的祖先。p元素也是em的祖先。 - 后代
body下所有的元素都是body的后代元素。span和em都是p的后代。 - 父子
p是两个span的父元素，span是p的子元素。 - 兄弟关系
两个span是兄弟元素，两个em不是兄弟元素。
根据元素关系的选择器
利用以上的关系，有两种选择器
- 后代选择器
- 兄弟选择器
也就是说，根据一个元素只能查找它的后代元素或者兄弟元素去应用样式。因为 css 的定义是层叠样式表，即子元素的样式可以覆盖从父元素继承来的样式，以及视图渲染顺序的原因，不能根据子元素去选择父元素应用样式，通过 span 去指定祖先元素背景色，无疑是不合理的。
关于 LearnKu
粤公网安备 44030502004330号