Стиль Шрифт Удивительный список каждый цвет другой пули

Question

Я пытаюсь установить любой другой цвет списка, используя значок шрифта Awesome в качестве пули. Однако, вместо того, чтобы стилизовать каждую другую пулю, она стирает все пуль. Если вы переключаетесь между (нечетным) и (четным): nth-child, вы можете видеть, что все цвета пули меняются при запуске скрипта. Почему это так? Есть ли лучший способ обойти это?

.fa-asterisk:before { 
 
    content: "\f069"; 
 
    color: #77c4d3; 
 
    vertical-align: middle; 
 
    line-height: 1.6em; 
 
} 
 

 
.fa-asterisk:nth-child(even):before { 
 
    color: #7d8a2e; 
 
    } 
 

 
ul.fa-ul { 
 
    list-style: none; 
 
    }

<ul class="fa-ul"> 
 
    <li><i class="fa-li fa fa-asterisk"></i>HGTV Living BIG Sky Realtor</li> 
 
    <li><i class="fa-li fa fa-asterisk"></i>Member Bitterroot Valley Board of Realtors</li> 
 
    <li><i class="fa-li fa fa-asterisk"></i>Montana Regional MLS</li> 
 
    <li><i class="fa-li fa fa-asterisk"></i>National Association of Realtors</li> 
 
    </ul>

Answer 1

Вы должны предназначаться для li элементов с четным/нечетным селектором, а .fa-asterisk является дочерним элементом и известен только DOM в качестве первого ребенка каждого ли.

.fa-asterisk:before { 
 
    content: "\f069"; 
 
    color: #77c4d3; 
 
    vertical-align: middle; 
 
    line-height: 1.6em; 
 
} 
 

 
li:nth-child(even) .fa-asterisk:before { 
 
    color: #7d8a2e; 
 
    } 
 

 
ul.fa-ul { 
 
    list-style: none; 
 
    }

<ul class="fa-ul"> 
 
    <li><i class="fa-li fa fa-asterisk"></i>HGTV Living BIG Sky Realtor</li> 
 
    <li><i class="fa-li fa fa-asterisk"></i>Member Bitterroot Valley Board of Realtors</li> 
 
    <li><i class="fa-li fa fa-asterisk"></i>Montana Regional MLS</li> 
 
    <li><i class="fa-li fa fa-asterisk"></i>National Association of Realtors</li> 
 
    </ul>

Answer 2

звездочка всегда первым ребенком Ли. Вам нужно применить nth-child() к тегу li. см ниже

.fa-asterisk:before { 
 
    content: "\f069"; 
 
    color: #77c4d3; 
 
    vertical-align: middle; 
 
    line-height: 1.6em; 
 
} 
 

 
li:nth-child(even) .fa-asterisk:before { 
 
    color: #7d8a2e; 
 
    } 
 

 
ul.fa-ul { 
 
    list-style: none; 
 
    }

<ul class="fa-ul"> 
 
    <li><i class="fa-li fa fa-asterisk"></i>HGTV Living BIG Sky Realtor</li> 
 
    <li><i class="fa-li fa fa-asterisk"></i>Member Bitterroot Valley Board of Realtors</li> 
 
    <li><i class="fa-li fa fa-asterisk"></i>Montana Regional MLS</li> 
 
    <li><i class="fa-li fa fa-asterisk"></i>National Association of Realtors</li> 
 
    </ul>