Question

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

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

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

#recently_played_grid li:first-child img

它似乎无法正常工作

Answer 1

如果您要查找的是第一个项目中的 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

Answer 2

这取决于您尝试定位的内容。如果它是您的选择器应该是第一个<li>：

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

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

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

您的保证金不起作用的原因可能是您的元素设置为内联或您可能遇到margin collapse。尝试添加背景颜色或其他内容以查看选择器是否正常工作。这可以帮助您解决问题。

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

Answer 3

你想要完成什么？

如果您正在尝试创建图片库，并且每个图片都在列表项中，那么您可能想要做的是在<ul>上设置负边距以抵消第一个<li>上的边距。 {1}}，以及第一个“列”

中的每个<li>

css 2.1中的第一个子伪类

3 个答案: