利用元素之间关系的选择器

未匹配的标注

文档结构#

如果把 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>h1
p 元素 html>body>p

元素之间关系#

  • 祖先
    html 元素是整个文档的祖先。 body 是浏览器默认显示的所有元素的祖先。p 元素也是 em 的祖先。
  • 后代
    body 下所有的元素都是 body 的后代元素。spanem 都是 p 的后代。
  • 父子
    p 是两个 span 的父元素,spanp 的子元素。
  • 兄弟关系
    两个 span 是兄弟元素,两个 em 不是兄弟元素。

根据元素关系的选择器#

利用以上的关系,有两种选择器

  • 后代选择器
  • 兄弟选择器

也就是说,根据一个元素只能查找它的后代元素或者兄弟元素去应用样式。因为 css 的定义是层叠样式表,即子元素的样式可以覆盖从父元素继承来的样式,以及视图渲染顺序的原因,不能根据子元素去选择父元素应用样式,通过 span 去指定祖先元素背景色,无疑是不合理的。

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 0
发起讨论 只看当前版本


暂无话题~