这是一个简化的页面结构，我想在其中选择“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/