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