모든 행의 첫 번째 아이콘에 대한 조건문

"margin-left : 0px"코드가 추가되도록 모든 행의 첫 번째 아이콘에 대한 조건문을 만들고 싶습니다. 내 웹 사이트의 각 아이콘에는 마진 - 위쪽 및 여백 - 왼쪽의 스타일이 5 px 있습니다. 그러나 예외는 모든 행의 첫 번째가되어야합니다.모든 행의 첫 번째 아이콘에 대한 조건문

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); 
}

I 클래스 small_hoverEffect하고 페이지에있는 모든 사업부 아이콘으로에 호버 효과를 추가했습니다. 누군가가이 div 클래스를 사용하여 아이콘 중 하나가 새 행의 처음에있을 때마다 "margin-left : 0px"조건을 갖는 조건을 설정하는 솔루션을 찾을 수 있는지 궁금합니다. 래퍼 너비는 매번 같은 줄에 12 개의 아이콘을 배치 한 후 아이콘이 다음 행에 놓 이도록 설정됩니다. 나는 조나단의 제안을보고 시도

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

하지만 여전히 작동하지 않았다. 각 행의 첫 번째 행은 여전히 왼쪽에서 5 픽셀 이동했습니다.

출처

2014-05-11 julian

나는 귀하의 질문에 태그를 많이 볼 수 있지만 당신이 찾고있는 제목에서 판단 도운 [ 'first-child' CSS selector] (https://developer.mozilla.org/en/docs/Web/CSS/:first-child) – Jonathan

편집 된 첫 번째 글. 나는 그것을 조나단에게 시도했지만 여전히 효과가 없었다. – julian

아니요,'.small_hoverEffect'에는 자식이 없기 때문입니다. – Jonathan

왼쪽이 아닌 오른쪽에 여백을 넣으면 원하는 효과가 나타납니다.

출처

2014-05-11 21:36:34 Eeji

이 질문에 대한 답을 제공하지 않습니다. 비평하거나 저자의 설명을 요청하려면 게시물 아래에 의견을 남겨 둡니다. – Gerep

예. 각 행의 첫 번째 아이콘은 0px 왼쪽 여백을 유지하면서 각 행 사이에는 5px 여백을 유지합니다. – Eeji

당신은 모든 아이콘에서 마진 왼쪽을 삭제하고 수행 할 수 있습니다

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

희망은 내가

출처

2016-08-09 11:31:29

모든 행의 첫 번째 아이콘에 대한 조건문

답변

관련 문제