如何自定义我在存档/主页上的第一篇文章的 CSS？答案

【问题标题】：How do I customize the CSS of just my FIRST post on archive/home pages?如何自定义我在存档/主页上的第一篇文章的 CSS？
【发布时间】：2014-07-16 12:38:57
【问题描述】：

所以在问这个问题之前我做了很多研究。我已经知道如何使用 if/else 和条件标签来使某些代码仅适用于某些页面，但是，我注意到没有一个指南或问题答案可以解决我关于仅设置第一个样式的问题/我博客中的最新帖子。我最接近找到解决方案（除了我没有能力实现的代码）是这个：http://helplogger.blogspot.ro/2014/01/create-magazine-style-layout-for-blogger-posts.html

该教程的示例站点：http://helploggertestblog.blogspot.com/

上述脚本的问题在于过于自动化，我不需要其他帖子的帖子摘要或缩略图——我只是想改变第一篇帖子的外观。我喜欢第一篇文章的宽度增加、边框、颜色改变等等。

是否有人对我如何隔离我正在寻找的东西、为我指明正确的方向、甚至给我一个通用容器以便我可以继续我的生活有任何想法？

【问题讨论】：

标签： css blogger

【解决方案1】：

没有看到你的任何代码，这有点猜测，但我还是会试一试。

我猜您的帖子位于 div 或其他父元素中。像这样的：

<div class="container">
    <div>
        <h3>Title</h3>
        <p>Content of the post ... </p>
    </div>
    <div>
        <h3>Title</h3>
        <p>Content of the post ... </p>
    </div>
    <div>
        <h3>Title</h3>
        <p>Content of the post ... </p>
    </div>
</div>

要仅对容器内的第一个 div 设置样式，您可以使用：

.container > div:nth-first-child {
   /* your specific style here */
}

使用您的代码，帮助会更容易......

编辑
使用：

.blog-posts > .post-outer:first-child {
     background: green;
}

【讨论】：

为了更具体地介绍代码，我实际上使用的是博客作者“简单模板”的修改版本，因此它是一个非常标准化的模板。我一直听说用不同类型的代码替换模板的“”部分以单独放置帖子，但我不知道如何开始.
我刚刚试用了您的代码，令人惊讶的是，我居然找到了解决困境的方法！我还有一个简单的问题：我如何使用容器来调整容器内部的小东西？我的意思是这样的： .blog-posts > .post-outer:first-child { .post-body img { max-width:230px;最大高度：自动；或者是你提供的容器之外的东西？我希望仅在我的第一篇文章中更改类别、帖子标题和图像的位置。当然，你帮了我很大的忙，我感谢你所做的一切。
无论您是否有时间回复，当我将所有内容推送到最终副本时，我都会继续感谢您的帮助。你帮了大忙！
澄清一下，我已经使用过类似“颜色：#f3f3f3;”的东西和小的文本修饰符可以在第一篇文章中混淆，但各个元素确实是第一篇文章的区别（stackoverflow 不会让我在 5 分钟后编辑我的主题）。
如果您缩进代码，就像我在这里为您所做的那样：jsfiddle.net/K9ADf 您可以更好地看到层次结构。所以如果你想定位图片，你使用.blog-posts > .post-outer:first-child .post-body img { ... }或者如果你想改变类别.blog-posts > .post-outer:first-child .post-labels a { ... }，等等......如果答案满足你的需求，请将其标记为答案（V标记的左边）。

【解决方案2】：

第一个帖子有一个条件标签

<b:if cond='data:post.isFirstPost'> 
Your custom css only for the 1st post here
</b:if>

【讨论】：

是的，我已经看到关于条件值的多个 sn-ps 条件，但该条件实际上适用于第一篇文章以下的所有内容。在我看到一堆代码使用该条件在他们的帖子下放置广告后，我发现了这一点。