排除某些CSS格式的特定圖像

Question

我在網格中的主頁上加載了一堆圖像。其中兩個圖像直接從assets文件夾中加載，而其他四個圖像則根據它們是否被選爲主頁面項目加載。

這裏是他們已加載的方式代碼：

<div class="three_column_grid"> 
     <div class="col span_1_of_3"> 
      <%= image_tag("1stassetsimage.png") %> 
      <%= image_tag("2ndassetsimage.jpg") %> 
      <% @product = Product.all %> 
      <% @product.each do |product| %> 
       <% if product.display_on_home_page and !product.is_highlight_product and !(product == '..') %> 
        <%= link_to image_tag(product.product_image), products_content_url(product.id), :controller=>'products' %> 
       <% end %> 
      <% end %> 
      <% @subcategory = Subcategory.all %> 
      <% @subcategory.each do |subcategory| %> 
       <% if subcategory.display_on_home_page and !subcategory.is_highlight_product and !(subcategory == '..') %> 
        <%= link_to image_tag(subcategory.image_attachment), subcategories_content_url(subcategory.id), :controller=>'subcategories' %> 
       <% end %> 
      <% end %> 
     </div> 
    </div> 

關於CSS本身，這是我控制的是走在了各個項目的造型方式：

  .three_column_grid{ 
       margin-top: 2%; 
       width: 60%; 
       position: relative; 
       float: right; 

       img { 
        display: inline-block; 
        width: 200px; 
        height: 200px; 
        -webkit-box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.3); 
        -moz-box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.3); 
        box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.3); 
        margin-left: 2%; 
        margin-right: 2%; 
        margin-bottom: 4%; 

        &:hover{ 
         display: inline-block; 
         border: none !important; 
         -webkit-box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.3); 
         -moz-box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.3); 
         box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.3); 
        } 
       } 
      } 

我已經嘗試了幾件事;添加一個額外的div標籤，僅對資產圖像進行格式化，拋出整個事物，並使用:not選擇器，我可以得到相同的結果。我希望陰影在1stassetsimage.png附近被移除，但我希望其他格式保持不變，因此它可以正確地適應網格。

Answer 1

您可以將類添加到排除標籤：

<%= image_tag("1stassetsimage.png", class: "plain") %> 

然後「撤消」箱子的影子該元素：

.three_column_grid { 
    img.plain, img.plain:hover { 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    } 
}