Font Awesomeアイコンを箇条書きとして使用して、リストの1つおきの色を設定しようとしています。ただし、他のすべての弾丸をスタイリングする代わりに、すべての弾丸をスタイリングします。（奇数）と（偶数）：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>子要素であり、各liの最初の子としてのみDOMに認識されるliように、奇数/偶数セレクターで要素をターゲットにする必要があります.fa-asterisk。
.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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加