gpt4 book ai didi

html - 仅使用 css,如何在 div/class 中选择 html 元素但排除一些嵌套的 div/classes

转载 作者:行者123 更新时间:2023-11-28 16:31:41 25 4
gpt4 key购买 nike

这是一个简化的页面结构,我想在其中选择“page”-div 和封闭元素内的所有图像,但不选择“keepoffa”或“keepoffb”中的图像。

<!DOCTYPE html>
<html lang="en">
<body>
<div class="page">
<img/> <!-- OK -->
<div class="keepoffa">
<img/> <!-- never take this-->
</div>
<div class="keepoffb">
<img/> <!-- never take this-->
</div>
<img/> <!-- OK -->
<div class="subpage">
<img/> <!-- OK -->
<ul>
<li>
<img/> <!-- OK -->
</li>
</ul>
</div>
<ul>
<li>
<img/> <!-- OK -->
</li>
</ul>
<div>
</body>
</html>

这是我的想法:

.page img:not(.keepoffa):not(.keepoffb) {
max-width: 300px;
}

但不排除不需要的 div。

如何有效地选择图片但排除那些不需要的div中的图片?仅需要 CSS。

最佳答案

使用 > 运算符选择 .page div 的子元素。和 .subpage img 到另一个图像

.page > img,
.subpage img{
border: 1px solid red;
}
  <div class="page">
<img src="http://placehold.it/100x100"/> <!-- OK -->
<div class="keepoffa">
<img src="http://placehold.it/100x100"/> <!-- never take this-->
</div>
<div class="keepoffb">
<img src="http://placehold.it/100x100"/> <!-- never take this-->
</div>
<img src="http://placehold.it/100x100"/> <!-- OK -->
<div class="subpage">
<img src="http://placehold.it/100x100"/> <!-- OK -->
</div>
<div>

关于html - 仅使用 css,如何在 div/class 中选择 html 元素但排除一些嵌套的 div/classes,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35226693/

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