请提前感谢您的回复。
我知道如何使用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>
答案 0 :(得分:52)
答案 1 :(得分:8)
.item:nth-child(even) {...}
.item:nth-child(odd) {...}
答案 2 :(得分:2)
当我们使用它时,也许有可能:
.item:nth-of-type(odd) .description{background-color:orange;}
或
.item:nth-child(odd) .description{background-color:orange;}
您可以看到我的屏幕截图:http://screencast.com/t/17g9joVj8Z
我希望你得到你需要的东西。
答案 3 :(得分: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;}