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

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/

In fact, CSS allows not only allow even/odd alternations, but arbitrary intervals. The keywords 'even' and 'odd' are just convenient shorthands. For example, for a long list you could do this:

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

in bootstrap，因为它表明你正在使用给定你的 classes 你需要 .container 和 .row classes 来包装 .col-*-* more info bootstrap docs

要为每个图标着色，您必须 select .col-*-* 的兄弟姐妹 odd 和 even 并最终将 fa class 属于 font-awesome 图标本身

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <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">test</h2>
        <div class="approachIcon col-xs-12"><i class="fa fa-user fa-3x col-xs-12 text-xs-center"></i>
        </div>
        <p class="text-xs-left">test</p>
      </div>
      <div class="col-xs-12 col-md-3 p-b-2 approachBox">
        <h2 class="text-xs-center p-t-2">test</h2>
        <div class="approachIcon col-xs-12"><i class="fa fa-user fa-3x col-xs-12 text-xs-center"></i>
        </div>
        <p class="text-xs-left">test</p>
      </div>
      <div class="col-xs-12 col-md-3 p-b-2 approachBox">
        <h2 class="text-xs-center p-t-2">test</h2>
        <div class="approachIcon col-xs-12"><i class="fa fa-user fa-3x col-xs-12 text-xs-center"></i>
        </div>
        <p class="text-xs-left">test</p>
      </div>
    </div>
  </div>
</div>

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

How to change the color of every even row?

css

css-selectors

font-awesome

twitter-bootstrap-3