仅使用 CSS(无 js)选择所有其他 div 类元素
问题说明
我知道如何使用 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="https://www.swvq.com/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="https://www.swvq.com/2793690.html#">::LEARN MORE::</a>
</div>
</div>
<div class="item"> //item 2 and so on...
<img src="https://www.swvq.com/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="https://www.swvq.com/2793690.html#">::LEARN MORE::</a>
</div>
</div>
</div>
<body>
</html>
正确答案
你想要 .item
上的 nth-child()
.
.item:nth-child(odd) .description {
background-color: red;
}
演示:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /reply/detail/tangibgfh
-
YouTube API 不能在 iOS (iPhone/iPad) 工作,但在桌面浏览器工作正常?
it1352 07-30 -
iPhone,一张图像叠加到另一张图像上以创建要保存的新图像?(水印)
it1352 07-17 -
保持在后台运行的 iPhone 应用程序完全可操作
it1352 07-25 -
使用 iPhone 进行移动设备管理
it1352 07-23 -
在android同时打开手电筒和前置摄像头
it1352 09-28 -
扫描 NFC 标签时是否可以启动应用程序?
it1352 08-02 -
检查邮件是否发送成功
it1352 07-25 -
Android微调工具-删除当前选择
it1352 06-20 -
Android App 和三星 Galaxy S4 不兼容
it1352 07-20 -
希伯来语的空格句子标记化错误
it1352 06-22