46

我知道如何使用 javascript 和 php 来做到这一点，但我正在尝试学习如何/是否可以仅使用 css 来做到这一点。

我有一个装有许多物品的容器。每个项目都有一张图片，在图片下方是一个包含描述的 div。我希望每个其他项目的描述背景都不同。

是否可以仅使用 css 来实现这一点？如果是这样，怎么做？我一直在玩弄选择器

.item:nth-child(odd){background-color:red}
.item .description:nth-of-type(odd){background-color:orange;}

我似乎无法得到它。建议，评论，任何东西都值得赞赏。
下面是一些简化的示例代码，演示了我正在做的事情。

<style>
#container{width:100% height:100%;}
.item {float:left; width:250px; height:700px;}
.item img {width:250px; height:250px; float:left;}
.description {width:250px; height:450px; float:left; background-color:blue;}
.description:nth-of-type(even){background-color:red;}      // <- Here's the line!!
</style>

<html>
 <body>
  <div id="container">
   <div class="item">       //item 1
    <img src="image.jpg"/>
    <div class="description"> //This (and every odd number) I want to be blue 
     <h1>Title</h1>
     <h2>Sub Title</h2>
     <p>Lorem Ipsum dolor sit for Adun!</p>
     <a href="#">::LEARN MORE::</a>
    </div>
   </div>
   <div class="item">      //item 2 and so on...
    <img src="image.jpg"/>
    <div class="description"> //and this (and every even number, red)
     <h1>Title</h1>
     <h2>Sub Title</h2>
     <p>Lorem Ipsum dolor sit for Adun!</p>
     <a href="#">::LEARN MORE::</a>
    </div>
   </div>
  </div>
 <body>
</html>
4

4 回答 4

69

你想nth-child()上.item。

.item:nth-child(odd) .description {
    background-color: red;
}

演示： jsFiddle

于 2013-02-20T18:08:18.807 回答
9 
.item:nth-child(even) {...}
.item:nth-child(odd) {...}

演示：http: //jsfiddle.net/DuL24/1/

于 2013-02-20T18:09:13.763 回答
2

当我们使用它时，也许它是可能的：

.item:nth-of-type(odd)  .description{background-color:orange;}

或者

.item:nth-child(odd) .description{background-color:orange;}

你可以看到我的截图：http
://screencast.com/t/17g9joVj8Z 我希望你得到你需要的东西。

于 2013-02-20T19:09:43.493 回答
0

您应该将 nth-of-type 设置为 .item 元素：

#container{width:100% height:100%;}
.item {float:left; width:250px; height:700px;}
.item img {width:250px; height:250px; float:left;}
.description {width:250px; height:450px; float:left; background-color:blue;}
.item:nth-of-type(even) .description {background-color:red;}
于 2013-02-20T18:13:31.493 回答