如何使用CSS选择器来定位包含特定属性或标签的div元素？

Question

我正在使用一个生成网站的 POS 系统。大部分代码是专有的，因此我无法编辑很多内容。

我有一个输出的类别列表，其中一些图像作为类别浮动。我想隐藏主页上列出的前 3 个。我尝试使用 div:nth-child(1) 定位包含的 div，有效，但每个子页面也隐藏了它们。

不幸的是，所有非主页仅在正文和主 div 中添加了一个类，因此我无法按类别 ID 或样式或按页面进行操作。

我拥有的是每个页面上都相同的图像标签。所以我尝试了以下方法：

img[src="theimage.png"] {
display: none; 
}

这也很好用，但是它只隐藏了图像。有什么方法可以使用该代码或该代码的变体来定位周围的 div 吗？这里有一个基本结构供参考：

<div class="cCategoryDivContainer col-xs-12 col-sm-6 col-md-6 col-lg-4">
     <div class="cCategoryDiv">
         <div class="cItemTitleDiv">
             <p class="cCategoryTitle">Category Title</p>
         </div>
         <div class="cItemImageDiv">
             <span class="cItemImageHelper"></span>
             <a href="#"><img class="cItemImage" src="theimage.png"></a>
         </div>
     </div>
 </div>

本质上，我想以 cCategoryDivContainer 类为目标 div IF 内部图像的 src 设置为 theimage.png 。

这可能吗？

Answer 1

实际上您可以在现代浏览器中实现。 查看支持：https://caniuse.com/?search=has

.cCategoryDiv:has(img[src="theimage.png"]) {
  display: none;
}

     

         

             
Category Title
         
         

             
             
         
     
     

         

             
Category Title