Question

我似乎无法制作正确的CSS选择器来更改每个其他Font Awesome图标的颜色。在尝试了许多不同的组合（将FA图标放入div中，给它不同的ID和类）之后，这是我的最后一件事：

HTML：

<div id="approachWrapper" class="col-xs-12 col-md-10 col-md-offset-1">
    <?php if (have_rows('approach_steps')):while(have_rows('approach_steps')):the_row();?>
        <div class="col-xs-12 col-md-3 p-b-2 approachBox">
            <h2 class="text-xs-center p-t-2"><?php the_sub_field('approach_step');?></h2>
            <div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-<?php the_sub_field('approach_icon');?> fa-3x col-xs-12 text-xs-center"></i></div>
            <p class="text-xs-left"><?php the_sub_field('approach_description');?></p>
        </div>
    <?php endwhile; else : endif; ?>
</div>

CSS：

.approachIcon{
    color: white;
}
.approachIcon:nth-of-type(2n){
    color: #E0991B;
}

Answer 1

如果我理解你的for循环，你会想要这样的东西：

div.approachBox:nth-child(even) { background-color: #FFFFFF; }
div.approachBox:nth-child(odd) { background-color: #E0991B; }

<div id="approachWrapper" class="col-xs-12 col-md-10 col-md-offset-1">
  <div class="col-xs-12 col-md-3 p-b-2 approachBox">
        <h2 class="text-xs-center p-t-2">approach_step</h2>
        <div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-approach_icon fa-3x col-xs-12 text-xs-center"></i></div>
        <p class="text-xs-left">approach_description</p>
   </div>

  <div class="col-xs-12 col-md-3 p-b-2 approachBox">
        <h2 class="text-xs-center p-t-2">approach_step</h2>
        <div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-approach_icon fa-3x col-xs-12 text-xs-center"></i></div>
        <p class="text-xs-left">approach_description</p>
   </div>

  <div class="col-xs-12 col-md-3 p-b-2 approachBox">
        <h2 class="text-xs-center p-t-2">approach_step</h2>
        <div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-approach_icon fa-3x col-xs-12 text-xs-center"></i></div>
        <p class="text-xs-left">approach_description</p>
   </div>

  <div class="col-xs-12 col-md-3 p-b-2 approachBox">
        <h2 class="text-xs-center p-t-2">approach_step</h2>
        <div class="approachIcon col-xs-12"><i id="iconColor" class="fa fa-approach_icon fa-3x col-xs-12 text-xs-center"></i></div>
        <p class="text-xs-left">approach_description</p>
   </div>
</div>

示例：https://jsfiddle.net/e74sr6ud/2/

实际上，CSS不仅允许偶数/奇数交替，而且允许任意间隔。关键字“偶数”和“奇数”只是方便的缩写。例如，对于长列表，您可以这样做：

li:nth-child(5n+3) { font-weight: bold }

来源：https://www.w3.org/Style/Examples/007/evenodd.en.html

Answer 2

看起来它循环遍历整个approachBox：

<div class="col-xs-12 col-md-3 p-b-2 approachBox">
  <div class="approachIcon col-xs-12">...</div>
</div>

<div class="col-xs-12 col-md-3 p-b-2 approachBox">
  <div class="approachIcon col-xs-12">...</div>
</div>

...

所以你应该像这样设置选择器：

.approachBox:nth-child(even) .approachIcon {...}

Answer 3

在bootstrap中，因为它显示您正在使用给定的课程，您需要.container和.row个课程来包裹.col-*-* more info bootstrap docs

要为每个图标着色，您必须选择.col-*-*使其成为odd和even的兄弟姐妹，最后定位属于{{1}的fa类图标本身

＆＃13;

font-awesome

＆＃13;

#approachWrapper > div:nth-of-type(2n) .fa {
  color: red
}
#approachWrapper > div:nth-of-type(2n+1) .fa {
  color: blue
}

＆＃13;

如何改变每个偶数行的颜色？

3 个答案: