排除某些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; 
    } 
}