Change style of most recent Tumblr post

问题

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.

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.

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

Again, thanks for your help.

回答1:

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;
}

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;
}

EDIT: 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.

来源：https://stackoverflow.com/questions/14817783/change-style-of-most-recent-tumblr-post