1. Trang chủ
  2. Câu hỏi và trả lời
  3. Cách chọn phần tử theo thứ tự? - Css

Cách chọn phần tử theo thứ tự? - Css

2016-10-23 18 views
5

Trong một div với lớp product, có một số yếu tố đa cấp. Chúng bao gồm hai hình ảnh. Hình ảnh đầu tiên là hình thu nhỏ sản phẩm và hình ảnh thứ hai là xếp hạng sản phẩm. Cả hai đều không có lớp và tôi không thể thay đổi mã html. Đôi khi, các hình ảnh được gói trong một thẻ <a></a>.Cách chọn phần tử theo thứ tự? - Css

Tôi phải chọn chỉ image product. Đây là img đầu tiên xuất hiện theo thứ tự bên trong mỗi 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>

Tôi đã thử với first-of-type và first-child nhưng phương pháp này bỏ qua trẻ em và phụ trẻ em. Hình ảnh được bao bọc bị bỏ qua. Làm cách nào để làm điều đó mà không thay đổi mã html?

Nguồn

2016-10-23 TSR

Trả lời

3

Làm thế nào về vấn đề này ...

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>

Nguồn

2016-10-23 12:55:13 Sankar

1

Bạn có thể sử dụng cả hai:

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

Việc đầu tiên sẽ được áp dụng cho người cuối cùng hình ảnh chỉ khi đó là một con trực tiếp của các yếu tố div.product.
Thứ hai sẽ được áp dụng cho hình ảnh của neo cuối cùng (cũng - nếu đó là con trực tiếp của phần tử div.product).

Dưới đây là một ví dụ làm việc:

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>

Nguồn

2016-10-23 12:42:19 Dekel

3

Kể từ khi hình ảnh đầu tiên có tài sản border. Bạn có thể theo phong cách đó.

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

Nguồn

2016-10-23 12:45:25 pol

1

Sau @poi, bạn cũng có thể thêm :not() để hình ảnh giá phong cách.

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

Nguồn

2016-10-23 12:57:35 w3debugger

1

Sử dụng selector này:

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

Nó chọn trực tiếp Childs img đầu tiên của .productvà tất cả <img> thẻ bên trong trực tiếp a Childs đầu tiên của .product:

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>

Nguồn

2016-10-23 13:07:19 Johannes

Các vấn đề liên quan

 Các vấn đề liên quan