后代选择器

CSS 权威指南笔记 /

如果我要将 div 下面的 p 元素设置 font-size:16px;，如果为每个 p 都加上 class 就像使用 font 标记一样费工夫。

<body>
    <h1></h1>
    <p></p>
    <div>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>

利用后代选择器，则可以写成

div p {font-size:16px;}

后代选择器是以后代关系选择元素的方式。
div p 以空格分隔，空格是一种结合符，解释为 “作为 div 元素后代的任何 p 元素”。

当然也可以层次更深，div p a，表示 “div 元素后代的任何 p 元素后代的任何 a 元素”。

实际情况下选择器是多种选择器配合的比较复杂的选择器，只要记住空格符代表的是后代选择器就可以了。

父子关系属于特殊的后代关系。写法与上方有所不同。

div > p {font-size:16px;}

会达到相同的效果，同样 > 也是一种结合符。它只能作用于 “直接的后代元素” 即子元素，与后代的区别是 div p 会选择所有 p 元素，而 div > p 不会选择第一个 p 元素。

<div>
    <block>
        <p></p>
    </block>
    <p></p>
    <p></p>
    <p></p>
</div>

div p {}
div > p {}

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

Markdown 文本

1.1k 声望

未知的世界只差向前一步

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

从小程序个人账户申请开始，带你一步步进行开发一个微信小程序，直到提交微信控制台上线发布。

讨论数量: 0

暂无话题~