如何按順序選擇元素？ - Css

在div與product類中，有一些多級元素。這些包括兩個圖像。第一張圖片是產品縮略圖，第二張圖片是產品評分。 他們都沒有類，我不能更改HTML代碼。有時，圖像被包裹在<a></a>標籤內。我需要選擇image product。這是第一個img，按照div.product內的順序出現。如何按順序選擇元素？ - Css

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

我試着用first-of-type和first-child但這種方法忽略了兒童和子兒。被包裹的圖像被忽略。如何在不更改html代碼的情況下做到這一點？

來源

2016-10-23 TSR

這個怎麼樣...

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>

來源

2016-10-23 12:55:13 Sankar

您可以同時使用：

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

第一個將其應用於只有當它是div.product元素的直接孩子的最後形象。
第二個將應用於最後一個錨點的圖像（也是 - 如果它是div.product元素的直接子元素）。

這裏是一個工作示例：

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>

來源

2016-10-23 12:42:19 Dekel

由於第一圖像具有屬性border。你可以通過它來設計風格。

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

來源

2016-10-23 12:45:25 pol

繼@poi，也可以加:not()款式等級的圖像。

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

來源

2016-10-23 12:57:35 w3debugger

使用此選擇：

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

它選擇第一直接 IMG的.product和所有<img>標籤.product第一直接a孩子的裏面孩子的：

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>

來源

2016-10-23 13:07:19 Johannes

如何按順序選擇元素？ - Css

回答

相關問題