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

Perry Craft спросил: 12 мая 2018 в 03:43 в: html

У меня есть следующий код на моей целевой странице 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?


3 ответа

Есть решение
trevorp dipak harishbhai ответил: 13 мая 2018 в 02:31

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

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

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

li:first-child {
  color: var(--oc-green);   
}
Perry Craft ответил: 12 мая 2018 в 04:55
Это сделал первый пример, спасибо вам большое
trevorp ответил: 12 мая 2018 в 04:46

Вместо li > :first-letter вам нужно изменить на li:first-letter:

li:first-letter {
    color: var(--oc-green);   
}
ks1313 ответил: 12 мая 2018 в 05:08
.content-wrap ul li:first-child{
    color:green;
}