更改最新的Tumblr帖子的样式 [英] Change style of most recent Tumblr post

问题描述

好吧，我已经在Google上搜索了好几个小时，没有运气.希望您能为您提供帮助和帮助.我正在为tumblr设计网格主题.我希望最新的帖子的格式与其余的格式不同.即，我希望它具有完整的页面宽度，并具有不同的背景颜色和边框属性.本质上，创建一个媒体标题，该标题会不断更新到最新的帖子.

Ok, I've googled this for hours with no luck. I hope you can help and appreciate you doing so. I am working on a grid theme for tumblr. I want the most recent post to be formatted differently than the rest. Namely, I want it to be full page width and have different background-color and border attributes. In essence, creating a media header that continually updates to the most recent post.

一个类似的例子是Digg.com.他们的最高职位是3全页宽度，其余的最高职位"在3列网格中.

A similar example is Digg.com. Their top post is 3 full page width and the rest of the "top posts" are in a 3 column grid.

我对html和css非常了解，但对js却不了解.我正在工作的网站是Adventuresportlife.tumblr.com

I am pretty competent with html and css but not with js (yet). The site I'm working on is adventuresportlife.tumblr.com

再次感谢您的帮助.

推荐答案

您可以使用 :nth-​​child(1) (CSS3)或

You can use the :nth-child(1) (CSS3) or :first-child (CSS 2) pseudo-classes. In this case, for example:

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

您的第一个元素现在已经具有唯一ID，并且具有内联样式元素中的CSS规则:

Your first element already has a unique ID now, with its own CSS rule from the inline style element:

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

但是请注意，IE2和IE8支持CSS2伪类，而CSS3伪类不受支持(来源: caniuse.com ).由于:first-child 可以完成这项工作，因此最好坚持这样做以获得最大的兼容性.

be aware though, that CSS2 pseudo-classes are supported in IE7 and IE8, while CSS3 pseudo-classes are not (source: caniuse.com). Since :first-child does the job, it might be wise to stick with that for maximum compatibility.

这篇关于更改最新的Tumblr帖子的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！