更改最新的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屋!