如何按订单选择元素？ - Css

Question

如何按订单选择元素？ - Css

在divwith类中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>

Run Code Online (Sandbox Code Playgroud)

我试着用first-of-type和first-child,但是这种方法忽略了儿童和子儿.包装的图像被忽略.如何在不更改HTML代码的情况下执行此操作？

Answer 1

San*_*kar 4

这个怎么样...

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，1 月前
查看次数：	900 次
最近记录：	9 年，1 月前