첫 번째 자녀가있는 부트 스트랩 행을 타겟팅하는 것이 작동하지 않습니다.

Question

첫 번째 .row를 타겟팅하려하지만 모든 행을 타겟팅하는 것 같습니다. 왜 첫 번째 아이가 일하지 않습니까?

<footer class="f1"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-5"> 
     <img src="/images/logo_footer.png" alt=""/> 
     </div> 
     <div class="col-md-7"></div> 
    </div> 
    </div> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-5"> 
     <img src="/images/logo_footer.png" alt=""/> 
     </div> 
     <div class="col-md-7"> 
     </div> 
    </div> 
    </div> 
</footer> 

CSS

.f1 .container .row:first-child { 
    padding-top:42px; 
    position:relative; 
} 

Answer 1

의사 선택기 :first-child은 선택자 : .f1 .container .row과 일치하는 각 항목의 첫 번째 하위 항목을 타겟팅합니다. 컨테이너의 인스턴스가 두 개인 경우 행을 자식으로 가질 때마다 선택기가 각 컨테이너의 첫 번째 하위 항목에 영향을줍니다. 첫 번째 컨테이너의 행만 영향을 받으려면 첫 번째 컨테이너도 지정해야합니다. 예 : .f1 .container:first-child .row

Answer 2

를 사용하여 CSS 선택기 아래는 모든 행에 영향을주지해야한다 : 여기 내 코드입니다.

.f1 .container .row { padding-top:42px; position:relative; }.

제대로 작동합니다.