问题描述
我知道如何使用 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.
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 上的 nth-child().
.item:nth-child(odd) .description { background-color: red; }
演示: