Wie wird das Element nach Auftrag ausgewählt? - Css

In einem div mit Klasse product gibt es einige mehrstufige Elemente. Dazu gehören zwei Bilder. Das erste Bild ist das Produkt-Thumbnail und das zweite Bild ist die Produktbewertung. Sie beide haben keine Klasse und ich kann den HTML-Code nicht ändern. Manchmal sind die Bilder in einem <a></a>-Tag eingeschlossen.Wie wird das Element nach Auftrag ausgewählt? - Css

Ich muss nur die image product auswählen. Es ist das erste img, das in jeder div.product Reihenfolge erscheint.

<html> 
 
    <style> 
 
    img { 
 
    border: solid 2px black 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
     <div class="product"> 
 
     <a href="#"><img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"></a><br> 
 
     <img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"/>  
 
     </div> 
 
     <div class="product"> 
 
     <a href="#"><img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"></a><br> 
 
     <a href="#"><img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"/></a>  
 
     </div> 
 
     <div class="product"> 
 
     <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"><br> 
 
     <a hre="#"><img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"/></a> 
 
     </div> 
 
     <div class="product"> 
 
     <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"><br> 
 
     <img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"></img> 
 
     </div> 
 
    </body> 
 
    </html>

Ich habe versucht, mit first-of-type und first-child aber diese Methode ignoriert Kinder und Unter Kindern. Das umgebrochene Bild wird ignoriert. Wie kann ich das tun ohne den HTML-Code zu ändern?

Quelle

2016-10-23 TSR

Wie dies über ...

div.product img[data-pin-nopin="true"]:nth-child(1){ 
 
    border-color:red; 
 
    }

<html> 
 
    <head> 
 
<style> 
 
    img { 
 
    border: solid 2px black 
 
    } 
 
</style> 
 
</head> 
 

 
<body> 
 
    <div class="product"> 
 
    <a href="#"> 
 
     <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"> 
 
    </a> 
 
    <br> 
 
    <img src="http://www.vistaview360.com/menuimages/stars-5.jpg" /> 
 
    </div> 
 
    <div class="product"> 
 
    <a href="#"> 
 
     <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"> 
 
    </a> 
 
    <br> 
 
    <a href="#"> 
 
     <img src="http://www.vistaview360.com/menuimages/stars-5.jpg" /> 
 
    </a> 
 
    </div> 
 
    <div class="product"> 
 
    <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"> 
 
    <br> 
 
    <a href="#"> 
 
     <img src="http://www.vistaview360.com/menuimages/stars-5.jpg" /> 
 
    </a> 
 
    </div> 
 
    <div class="product"> 
 
    <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true" /> 
 
    <br> 
 
    <img src="http://www.vistaview360.com/menuimages/stars-5.jpg" /> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-10-23 12:55:13 Sankar

Sie können beide verwenden:

div.product > img:last-child { 
    border-color: red; 
} 
div.product > a:last-child img { 
    border-color: red; 
}

Die erste nur auf den letzten Bild angewendet werden, wenn es ein direkter Nachkomme des div.product Element ist.
Die zweite wird auf das Bild des letzten Ankers angewendet (auch - wenn es ein direktes Kind des Elements div.product ist).

Hier ist ein funktionierendes Beispiel:

img { 
 
    border: solid 2px black 
 
} 
 
div.product > img:last-child { 
 
    border-color: red; 
 
} 
 
div.product > a:last-child img { 
 
    border-color: red; 
 
}

<div class="product"> 
 
    <a href="#"><img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"></a><br> 
 
    <img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"/>  
 
</div> 
 
<div class="product"> 
 
    <a href="#"><img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"></a><br> 
 
    <a href="#"><img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"/></a>  
 
</div> 
 
<div class="product"> 
 
    <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"><br> 
 
    <a hre="#"><img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"/></a> 
 
</div> 
 
<div class="product"> 
 
    <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"><br> 
 
    <img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"/> 
 
</div>

Quelle

2016-10-23 12:42:19 Dekel

Da die erste Bildeigenschaft hat border. Sie können dadurch stylen.

.product img[border] { 
    border: 5px solid green; 
}

Quelle

2016-10-23 12:45:25 pol

@poi Nach können Sie auch :not() zu Stil Bewertung Bild hinzufügen.

/* For Product Image */ 
 
.product img[border] { 
 
    border: 5px solid green; 
 
} 
 

 
/* For Rating Image */ 
 
.product img:not([border]) { 
 
    border: 5px solid red; 
 
}

<div class="product"> 
 
    <a href="#"> 
 
    <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"> 
 
    </a> 
 
    <br> 
 
    <img src="http://www.vistaview360.com/menuimages/stars-5.jpg" /> 
 
</div> 
 
<div class="product"> 
 
    <a href="#"> 
 
    <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"> 
 
    </a> 
 
    <br> 
 
    <a href="#"> 
 
    <img src="http://www.vistaview360.com/menuimages/stars-5.jpg" /> 
 
    </a> 
 
</div> 
 
<div class="product"> 
 
    <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"> 
 
    <br> 
 
    <a hre="#"> 
 
    <img src="http://www.vistaview360.com/menuimages/stars-5.jpg" /> 
 
    </a> 
 
</div> 
 
<div class="product"> 
 
    <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"> 
 
    <br> 
 
    <img src="http://www.vistaview360.com/menuimages/stars-5.jpg"></img> 
 
</div>

Quelle

2016-10-23 12:57:35 w3debugger

Mit diesem Selektor:

.product > img:first-child, .product > a:first-child > img

Es ist die erste direkten img Childs von .productund alle <img> Tags innerhalb der ersten Direkt a Childs von .product wählt:

img { 
 
    border: solid 2px black; 
 
    } 
 
.product > img:first-child, .product > a:first-child > img { 
 
    border: solid 2px red; 
 
    }

 <div class="product"> 
 
     <a href="#"><img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"></a><br> 
 
     <img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"/>  
 
     </div> 
 
     <div class="product"> 
 
     <a href="#"><img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"></a><br> 
 
     <a href="#"><img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"/></a>  
 
     </div> 
 
     <div class="product"> 
 
     <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"><br> 
 
     <a hre="#"><img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"/></a> 
 
     </div> 
 
     <div class="product"> 
 
     <img border="0" src="http://www.vistaview360.com/cameras/images/nikon_images/nikon-d5500-s.jpg" alt="Nikon D5500" width="140" height="140" data-pin-nopin="true"><br> 
 
     <img src ="http://www.vistaview360.com/menuimages/stars-5.jpg"></img> 
 
     </div>

Quelle

2016-10-23 13:07:19 Johannes

Wie wird das Element nach Auftrag ausgewählt? - Css

Antwort

Verwandte Themen