[英]Condition statement for first icon in every row
我想为每行的第一个图标创建条件语句,以向其添加“ margin-left:0px”代码。 我网站上的每个图标的样式均以5像素为上,左上角。 但是,例外必须是每一行的第一位。
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。
将您的边距放在右侧而不是左侧,这将具有您想要的效果。
您可以从所有图标中删除左边距,然后执行以下操作:
.icon + .icon /* if element left to element with class "icon" have the same class, do ... */
{
margin-left: 30px;
}
希望我有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.