gpt4 book ai didi

html - 更改嵌套 div 中元素的样式

转载 作者:太空宇宙 更新时间:2023-11-04 03:43:10 24 4
gpt4 key购买 nike

这是一个带有一些样式的 HTML 页面。

<html>
<head>
<style type="text/css">
span {
color: #FFF;
}
.light-gray span {
background-color: #AAA;
}
.dark-gray span {
background-color: #666;
}
</style>
</head>
<body>
<div class="light-gray">
<span>Text on light-gray background</span>
<div class="dark-gray">
<span>Text on dark-gray background</span>
<div class="light-gray">
<span>Text on light-gray background again</span>
</div>
</div>
<div class="dark-gray">
<span>More text on dark-gray background</span>
</div>
</div>
</body>
</html>

目标是创建多级结构,以便每个级别的元素使用两种配色方案中的一种,在上例中为浅灰色和深灰色。第一层是浅灰色,第二层是深灰色,第三层又是浅灰色,依此类推。问题是应该是浅灰色的第 3 级 span 实际上是深灰色。我应该如何更改此页面的 CSS 以实现我的目标?

更新:样式化的 div 中的元素可能位于不会更改配色方案的容器中,例如:

<div class="dark-gray">
<div>
<div>
<span>Text on dark-gray background</span>
</div>
</div>
<div class="light-gray">
<div>
<span>Text on light-gray background again</span>
</div>
</div>
</div>

最佳答案

为什么不将样式分配给 span 本身:

span.light-gray { background-color: #AAA; }
span.dark-gray { background-color: #666; }

并将 HTML 更新为:

<div>
<span class="light-gray">Text on light-gray background</span>
<div>
<span class="dark-gray">Text on dark-gray background</span>
<div>
<span class="light-gray">Text on light-gray background again</span>
</div>
</div>
<div>
<span class="dark-gray">More text on dark-gray background</span>
</div>
</div>

关于html - 更改嵌套 div 中元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24572440/

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