样式化循环内的第一个元素 - ejs答案

【问题标题】：styling the first element inside loop - ejs样式化循环内的第一个元素 - ejs
【发布时间】：2021-07-20 18:30:35
【问题描述】：

使用 ejs，我有一个 for 循环，它构建了几个 div 的容器，并在其中构建了一些 hr 和 text。

我只想通过 CSS 定位 first div 内的 hr 元素。

        <% for(let i =0;i < items.length;i++) {%>
        <div class="listItemDiv"> 
          <hr />    // target
            <p><%=items[i]%><p>

        </div>
        <%  }%>

*我知道我可以做一个 if 语句并添加另一个类。如果可能的话，我的目标是使用hr:psuedo-class 解决问题

【问题讨论】：

如果这是其父级中的第一个子级，则 .listItemDiv:first-child hr 完成这项工作。
实际上尝试了除此之外的所有内容。谢谢！

标签： css loops css-selectors ejs

【解决方案1】：

除非我混合了一些东西，否则第一个元素的 CSS 将是：

div.listItemDiv:nth-of-type(1) > hr {
    ...
}

nth-of-type(1) 选择指定类型的第一个匹配元素 (div.listItemDiv)。

【讨论】：

【解决方案2】：

请尝试

<% items = ["a", "b", "c"] %>
<% for(let i=0;i < items.length;i++) { %>
    <div class="listItemDiv">
        <% if(!i) { %>
        <hr /> // target
        <% } %>
        <p>
            <%=items[i]%>
        <p>
    </div>
<% } %>

【讨论】：