Question

我正在尝试使用Font Awesome图标作为项目符号来设置列表的每种其他颜色。然而，它不是为每个其他子弹造型，而是为所有子弹设置样式。如果在（奇数）和（偶数）：nth-child之间来回切换，则可以在运行脚本时看到所有子弹颜色发生变化。为什么这样做呢？有没有更好的方法来解决这个问题？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您需要使用奇数/偶数选择器定位li元素，因为.fa-asterisk是子元素，并且只知道DOM是每个li的第一个子元素。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Style Font Awesome列出其他所有子弹颜色

2 个答案: