在div类product中，有一些多级元素。这些包括两个图像。第一个图像是产品缩略图，第二个图像是产品评级。 他们都没有课程，我无法更改HTML代码。有时，图片会被包含在<a></a>标记内。
我必须只选择image product。它是每个img内按顺序显示的第一个div.product。
<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代码的情况下执行 ？
答案 0 :(得分：3)
由于第一张图片具有属性border。你可以用它来设计风格。
.product img[border] {
border: 5px solid green;
}
答案 1 :(得分：3)
这个怎么样......
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>
答案 2 :(得分：1)
您可以同时使用：
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>
答案 3 :(得分：1)
关注@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>
答案 4 :(得分：1)
使用此选择器：
.product > img:first-child, .product > a:first-child > img
它选择.product 中的第一个直接 img孩子和 <img>个a个孩子的.product个孩子{1}}：
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>