Wie verwende ich CSS-Selektoren, um auf div-Elemente abzuzielen, die bestimmte Attribute oder Tags enthalten?

Question

Ich verwende ein POS-System, das eine Website generiert. Der größte Teil des Codes ist proprietär, sodass ich nicht viel bearbeiten kann.

Ich habe eine Ausgabeliste mit Kategorien, in der einige Bilder als Kategorien schweben. Ich möchte die ersten 3 auf der Startseite ausblenden. Ich habe versucht, das enthaltende Div mit div:nth-child(1) zu positionieren, was funktioniert, aber jede untergeordnete Seite verbirgt sie auch.

Leider ist bei allen Nicht-Homepages nur eine Klasse im Hauptteil und Haupt-Div hinzugefügt, sodass ich dies nicht nach Kategorie-ID, Stil oder Seite tun kann.

Was ich habe ist das gleiche Bild-Tag auf jeder Seite. Also habe ich Folgendes versucht:

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

Das funktioniert auch großartig, aber das Bild wird nur ausgeblendet. Gibt es eine Möglichkeit, das umgebende Div mithilfe dieses Codes oder einer Variation dieses Codes zu positionieren? Hier ist eine Grundstruktur als Referenz:

<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>

Im Wesentlichen möchte ich auf die Klasse cCategoryDivContainer abzielen und den Quellcode des Bildes innerhalb des Div IF auf theimage.png setzen.

Ist das möglich?

Answer 1

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

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

     

         

             
Category Title
         
         

             
             
         
     
     

         

             
Category Title