html - 将 CSS 选择器与 :first-child 组合

Question

假设一些 HTML 包含以下 div block :

<div id="messages">
    <div>
        <span>from user</span>
        <span>The content of the message</span>
        <time datetime="2017-02-15T19:21:20.848Z">10 hours ago</time>
    </div>
</div>

如何使用 CSS 选择器设置“来自用户”文本(以及该文本)的样式？我尝试使用 #messages>div:first-child 选择 div #messages 的子 div 的 first-child 元素，但这没有用。

编辑:

我的语法有一个小错误。

正确的 CSS 选择器规则应该是 #messages>div>:first-child 而不是我之前尝试过的 (#messages>div:first-child)。区别在于 > 我在 div 之后错过了。

Answer 1

你少了一个空格。您需要作为第一个子项的 span，而不是作为第一个子项的 div。

找到第一个跨度:

#messages > div :first-child

找到第一个 div:

#messages > div:first-child