Question

我想确切知道HTML上的哪个元素实现了n-child或first-child属性，以便第一篇文章具有不同的样式。通常在许多博客中看到的网格。 I found this same question here in SO。但由于我的html元素不同，我似乎无法使它工作。我尝试使用：

#content #posts:first-child {...}

但它不起作用。了解Tumblr的局限性，我不确定是否有针对此的解决方法。无论如何，这是我的HTML：

<div id="content">
<div id="posts">

{block:Text}<!--textpost--> 
        {block:Title}
            <h1 class="title">
                <a href="{Permalink}">{Title}</a>
            </h1>
        {/block:Title}
            <div class="text">{Body}</div>
        {block:More}
            <div class='rmlink'><a href="{Permalink}">Read more</a></div>
        {/block:More}
{/block:Text}<!--textpost-->

{block:Photo}<!--photopost-->
    <h1 id="ribbon">
        <a href="{Permalink}">Photo of the day</a>
    </h1>
    {LinkOpenTag}
        <div id="photopost">
            <img src="{PhotoURL-HighRes}"/></div>
    {LinkCloseTag}
    {block:Caption}
        <div class="caption">{Caption}</div>
    {block:More}
        <div class='rmlink'>
            <a href="{Permalink}">Read more</a>
        </div>
    {/block:More}
    {/block:Caption}
{/block:Photo}<!--photopost-->




</div><!--posts-->
</div><!--content-->

Answer 1

每个帖子类型都需要一个包装器。我见过的通常标记是一个div或文章与课程帖子。这将允许您针对第n个孩子。因此，在每个帖子类型块{block：Text}中，您需要将内容包装在具有相同类的包装器中。

然后你可以写一些像这样的CSS：

#posts .post {
  color:black;
}

#posts .post:first-child {
  color:#CCCCCC;
}

请看我的小提琴：http://jsfiddle.net/4fsh7rvr/

#posts元素将始终是唯一的子元素，因为它具有唯一的ID。

Tumblr 1st使用nth或第一个孩子发布不同的风格

1 个答案: