html - 试图得到第一个 child 并改变它的颜色

Question

我的 ejs 着陆页中有以下代码:

<div class="content-wrap">
                <ul class="fly-in-text">
                    <% for(var i = 0; i < introText.length; i++){ %>
                    <li><%= introText[i] %></li>
                    <% } %>
                </ul>

                <a href="/home" class="enter-button">Enter</a>
            </div>

在我的 CSS 中有以下内容

li > :first-letter {
    color: var(--oc-green)
}
.welcome-section .content-wrap .fly-in-text li {
    display: inline-block;
    margin-right: 30px;
    font-size: 5em;
    color: #fff;
    opacity: 1;
    transition: all 2s ease;
}

我正在尝试将此循环中第一个 li 元素的颜色更改为我设置的绿色。有没有其他方法可以指向第一个 li 元素？

Answer 1

如果需要改变第一个li的first-letter的颜色，代码如下:

li:first-child:first-letter {
  color: var(--oc-green);   
}

如果需要改变每个li的first-letter的颜色，代码如下:

li:first-child {
  color: var(--oc-green);   
}