css 2.1 中的第一个子类伪类答案

【问题标题】：First-child pseudo-class in css 2.1css 2.1 中的第一个子类伪类
【发布时间】：2013-08-28 22:36:37
【问题描述】：

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

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

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

#recently_played_grid li:first-child img

好像不行

【问题讨论】：

你想要图像的边距在第一个 li 内，还是 li 本身？
你可能想要#recently_played_grid li img:first-child。这会将样式应用于该li 中的第一个img 子级。
第一个子元素是哪个元素？那是你应该放置选择器的地方。
似乎对我有用：jsfiddle.net/58kVH
first-child 的行为在这里解释：w3.org/TR/CSS2/selector.html#first-child Fiddle 可能会更清楚您的问题

标签： html css css-selectors

【解决方案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

【讨论】：

【解决方案2】：

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

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

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

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

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

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

【讨论】：

:first-child 选择器从 IE7 开始在 IE 中得到支持，以及直接兄弟 + 组合器。
左边距永远不会发生边距折叠。

【解决方案3】：

你想完成什么？

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

【讨论】：