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

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?

html css ejs

Alex K. ответил: 12 мая 2018 в 03:50

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

IP_ ответил: 12 мая 2018 в 03:51

проверьте это: stackoverflow.com/questions/9553539/first-letter-on-li-elements

IP_ ответил: 12 мая 2018 в 03:51

Возможный дубликат : первая буква на элементах li

A Tom Called Stu ответил: 12 мая 2018 в 04:07

Вы имеете в виду первого ребенка? Если вы хотите "изменить цвет первого элемента в цикле", вы не можете использовать первую букву

Perry Craft ответил: 12 мая 2018 в 04:13

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

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;
}