后代选择器

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 文本

php_yt

1.1k 声望

未知的世界只差向前一步

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

以构建论坛项目 LaraBBS 为线索，展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。

推荐文章：

更多推荐...

翻译

Laravel 角色和权限：拦截器（Gates）和策略（Policies）解释 30 / 1 |

博客

[踩了个坑] Laravel 访问https网址，url('/')竟然只返回 http？ 16 / 14 |

博客

基于Hyperf + Vue + Element 构建的后台管理系统（内置聊天系统） 68 / 21 |

博客

在 Laravel 中编写简洁的代码的策略 14 / 59 |

教程

E-admin无需关注JavaScript，只用php代码即可快速构建后台系统 28 / 40 |

博客

写一个简单的IoC容器案例，理解什么是依赖注入和控制反转 78 / 14 |

讨论数量: 0

发起讨论只看当前版本

暂无话题~

后代选择器