gpt4 book ai didi

html - 如何仅使用 CSS(无 js)选择所有其他 div 类元素

转载 作者:技术小花猫 更新时间:2023-10-29 11:39:44 25 4
gpt4 key购买 nike

我知道如何使用 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>

最佳答案

你想要 .item 上的 nth-child()

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

演示: jsFiddle

关于html - 如何仅使用 CSS(无 js)选择所有其他 div 类元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14986810/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com