试图让第一个孩子改变它的颜色

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

如果您需要更改第一个first-letter的{​​{1}}的颜色，则代码如下：

li

如果您需要更改每li:first-child:first-letter { color: var(--oc-green); } 个first-letter的颜色，则代码如下：

li

Answer 2

而不是li > :first-letter，您需要更改为li:first-letter：

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

Answer 3

.content-wrap ul li:first-child{
    color:green;
}