пытаясь заполучить первого ребенка и изменить его цвет

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 первого li, код ниже:

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

Если вам нужно изменить цвет first-letter каждого li,код ниже:

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

Answer 2

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

Answer 3

Вместо того, чтобы делать li > :first-letter, вам нужно изменить на li:first-letter:

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