html - css 2.1中的第一个 child 伪类

Question

我不知道在这个定义中把伪类放在哪里:

#recently_played_grid li img {
    margin-left: 10px;
}

我只想在列表的第一个子项中将 margin-left 设置为 0px。我应该怎么做:

#recently_played_grid li:first-child img

?

好像不行

Answer 1

如果您正在寻找的是第一个 li 项中的ALL 图像，那么您的代码应该可以正常工作。如果您希望在每个 li 的第一个 img 子级上留有余量，那么您必须将其更改为

#recently_played_grid li img:first-child

<ul>
    <li>
        <img />                    << Selects this, and
        <img />
        <img />
    </li>
    <li>
        <img />                     << Selects this, and
        <img />
        <img />
    </li>
    <li>
        <img />                     << Selects this
        <img />
        <img />
    </li>
</ul>

如果你只想要 FIRST li 中的 FIRST img 那么你应该将它更改为

#recently_played_grid li:first-child img:first-child


<ul>
    <li>
        <img />                          << Selects only this
        <img />
        <img />
    </li>
    <li>
        <img />
        <img />
        <img />
    </li>
    <li>
        <img />
        <img />
        <img />
    </li>
</ul>

在这里进一步阅读 http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors