如何为Blogger循环调取的最新5篇文章首篇设置独立CSS样式

下面提供两种可行的实现方式，你可以根据需求选择：

方法一：纯CSS实现（无需修改现有脚本，最简便） #

直接用CSS原生伪类选择器匹配第一篇文章，不需要改动现有JS逻辑，代码如下：

/* 匹配.postList下的第一个li元素，自定义专属样式 */
.postList li:first-child {
  /* 这里替换为你需要的独立样式，以下是示例 */
  width: 100%;
  background: #f0f0f0;
  padding: 16px;
  border-radius: 8px;
}
/* 剩余4篇文章会自动沿用原有样式，无需额外处理 */

:first-child伪类兼容性极强，所有主流浏览器都支持，是成本最低的实现方案。

方法二：修改JS添加专属类名（灵活性更高） #

如果需要更精准的样式控制、避免和其他列表元素样式冲突，可以在循环生成DOM时给第一篇文章加自定义类名，修改后的JS代码如下：

let postCount = 5;
    
function funcrct(JSON) {
  const POSTS = JSON.feed.entry;
  let postTitle, postUrl = "";
  let rpc = document.querySelector(".postList");
  for (let i = 0; i < postCount; i++) {
    // 这里把原forEach的索引名从i改为idx，避免和外层循环的i变量冲突，防止逻辑异常
    POSTS[i].link.forEach((el, idx) => {
      if (el.rel === "alternate") {
        postTitle = el.title;
        postUrl = el.href;
      }
    })

    let thumbnail = POSTS[i].content.$t.match(/(http)?s?:?(\/\/[^"']*\.(?:webp))/)[0];
    // 新增判断：第一篇文章（i=0）添加专属类first-post
    const customClass = i === 0 ? 'class="first-post"' : '';
    rpc.innerHTML += `<li ${customClass}>
<a href="${postUrl}"><figure>       
<img src="${thumbnail}" alt="${postTitle}"/>
<figcaption>
${postTitle}</figcaption></figure></a>
</li>`;
  }
}

var url = document.location.origin;
var fsrc = document.createElement("script");
fsrc.src = `${url}/feeds/posts/default?alt=json-in-script&start-index=1&max-results=${postCount}&callback=funcrct`;

document.body.appendChild(fsrc);

修改完成后就可以通过类名自定义第一篇的样式：

.postList li.first-post {
  /* 你的自定义样式 */
}

内容的提问来源于stack exchange，提问作者awakening