每行第一个图标的条件语句答案

【问题标题】：Condition statement for first icon in every row每行第一个图标的条件语句
【发布时间】：2014-06-29 02:28:19
【问题描述】：

我想为每行中的第一个图标创建一个条件语句，以添加“margin-left: 0px”代码。我网站上的每个图标都有 5 px 的 margin-top 和 margin-left 样式。但是，异常必须是每一行的第一行。

http://www.juliancelaj.com/portfolio.html

html

<a id="small_boardgame" class="small_hoverEffect" style="margin-left: 0px;" href="img/boardgamecover_3.jpg" rel="lightbox[best_portfolio]" title="Uno Board Game Cover" alt="Uno Board Game Cover, image, cards, throwing, machine"></a>
                        <a id="small_video_game" class="small_hoverEffect" href="img/vidgame_3.jpg" rel="lightbox[best_portfolio]" title="Video Game Cover" alt="UEFA Football 2011 Cover, Podolski, Rage360 Concept artbox, speed, emotion"></a>
                        <a id="small_cereal" class="small_hoverEffect" href="img/cerealcover_3.jpg" rel="lightbox[best_portfolio]" title="Cereal Box Cover" alt="Mario, Luigi, Cereal Box Cover, Wario, fire, strawberries, concept, mushrooms, illustration, delicious, design"></a>

css

#small_boardgame {
    background-image:url(img/boardgamecover.jpg);
}

#small_video_game {
    background-image:url(img/vidgame.jpg);
}

#small_cereal {
    background-image:url(img/cerealcover.jpg);
}

.small_hoverEffect {    
    width:50px;
    height:50px;
    display:block;
    background-repeat:no-repeat;
    float:left;
    margin: 5px 0 0 5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;  
}

.small_hoverEffect:hover {
    background-position: 0 -50px;
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);  
}

我为页面上的每个 div 图标添加了类 small_hoverEffect 和悬停效果。我想知道是否有人可以找到使用此 div 类的解决方案来设置一个条件，即每次一个图标首先出现在新行上时，它都有一个“margin-left：0px”条件。设置包装器的宽度，以便每次将 12 个图标放在同一行后，图标会放在下一行。

我试着看看乔纳森的建议，

.small_hoverEffect:first-child {
    margin-left: 0px !important;    
}

但它仍然没有工作。每行的第一行仍然向左移动 5px。

【问题讨论】：

我在你的问题中看到了很多标签，但从你正在寻找的标题来看first-child CSS selector
编辑了第一篇文章。我试了乔纳森，但仍然没有效果。
不，那是因为.small_hoverEffect 没有孩子。
没有行，您的图像是浮动的，它们堆叠在左侧。您无法识别每行的第一个元素。但是你可以使用一个包装器，使margin-left：-5px。
是的，Loenix，我知道。我希望有另一种方法，而不是仅仅将包装器移动 5px。

标签： php html css conditional-statements

【解决方案1】：

将您的边距放在右侧而不是左侧，这将产生您想要的相同效果。

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。
是的。它将每行中的第一个图标保留 0px 左边距，同时在每个图标之间保留 5px 边距。

【解决方案2】：

您可以从所有图标中删除 margin-left 并执行以下操作：

.icon + .icon /* if element left to element with class "icon" have the same class, do ... */
{
    margin-left: 30px;
}

希望对我有所帮助

【讨论】：