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

Question

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

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

我想在列表的第一个子项中将 margin-left 设置为 0px。我应该这样做：

#recently_played_grid li:first-child img

?

它似乎不起作用

Answer 1

如果您正在寻找的是在第一个 li 项中包含所有图像，那么您的代码应该可以正常工作。如果您希望在每个 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

Answer 2

这取决于您要针对的目标。如果它是第一个<li>你的选择器应该是：

#recently_played_grid li:first-child img { ... }

如果您尝试定位第一张图片：

#recently_played_grid li img:first-child { ... }

您的边距不起作用的原因可能是您的元素设置为内联，或者您可能遇到边距崩溃。尝试添加背景颜色或其他东西以查看您的选择器是否正常工作。这应该可以帮助您解决问题。

此外，如果您担心跨浏览器，旧版本的 IE 不支持结构伪选择器。我通常使用Selectivizr之类的东西作为 polyfill。

Answer 3

你想要完成什么？

如果您正在尝试创建一个图片库，并且每张图片都在一个列表项中，那么您可能想要做的是在第一个上放置一个负边距<ul>以抵消第一个上的边距<li>，并且通过扩展<li>在第一个“列”