css - 更改最近 Tumblr 帖子的样式

Question

好的，我已经用谷歌搜索了几个小时，但没有运气。我希望你能帮助并感谢你这样做。我正在为 tumblr 开发网格主题。我希望最新帖子的格式与其他帖子不同。即，我希望它是全页宽度并具有不同的背景颜色和边框属性。本质上，创建一个不断更新到最新帖子的媒体标题。

一个类似的例子是 Digg.com。他们的顶帖是 3 个整页宽度，其余的“顶帖”位于 3 列网格中。

我对 html 和 css 非常胜任，但对 js （还）还没有。我正在开发的网站是 Adventuresportlife.tumblr.com

再次感谢您的帮助。

score 4 · Accepted Answer

您可以使用:nth-child(1)(CSS3) 或:first-child(CSS 2) 伪类。在这种情况下，例如：

.masonry-brick:first-child {
    background-color: red;
    border: 2px solid black;
}

你的第一个元素现在已经有了一个唯一的 ID，它有自己的内联样式元素的 CSS 规则：

#toppost {
    background-color: white;
    border-bottom: 1px solid green;
    width: auto;
}

编辑：但请注意，IE7 和 IE8 支持 CSS2 伪类，而 CSS3 伪类不支持（来源：caniuse.com）。既然:first-child做了这项工作，最好坚持这样做以获得最大的兼容性。

1 回答 1