如何使用CSS（无js）选择每隔一个div类元素 [英] How do I select every other div class element using just CSS (no js)
问题描述
先谢谢您的回应。
我知道如何使用javascript和php，但我想知道如何/如果可能只需要css。
I know how to do this using javascript and php, but I am trying to learn how/if it is possible to do this using just css.
我有一个容器容纳很多项目。每个项目都有一个图片，下面是一个包含描述的div。我想要描述的背景对于每个其他项目是不同的。
I have a container which holds many items. Each item has a picture, and below it, a div containing a description. I want the background of the description to be different for every other item.
是否可以只使用CSS实现这一点？如果是，如何？我一直在使用选择器愚弄
Is it possible to achieve this using just css? If so, how? I have been fooling around with using the selectors
.item:nth-child(odd){background-color:red}
.item .description:nth-of-type(odd){background-color:orange;}
我似乎无法得到它。建议，评论，任何东西都赞赏。再次感谢朋友。下面是一些简化的示例代码，演示了我的操作。
I can't seem to get it. Suggestions, comments, anything is appreciated. Thanks again friends. Below is some simplified sample code that demonstrates what I have going on.
<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>
推荐答案
您要 （）在 .item 。
.item:nth-child(odd) .description {
background-color: red;
}
演示： < sub>
这篇关于如何使用CSS（无js）选择每隔一个div类元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
