n 번째 아이가 부트 스트랩 패널에서 브라우저에 의해 무시

Question

나는 4 개 영감을 렌더링하는 <%= render @inspirations %> 있습니다

VIEW 코드

<div class="panel panel-default"> 
    <div class="panel-body"> 
    <%= link_to inspiration_path(inspiration) do %> 
     <%= inspiration.name %> 
    <% end %> 
    </div> 
</div> 

을하지만 난 border:white를 제거하려면 홀수 번째는 왼쪽, 짝수 번째 영감은 오른쪽 (패널이 화면 가장자리에 닿는 방식)입니다.

내가 nth-child을 위해 지금해야하는 브라우저

CODE

.home-panels a:nth-child(odd) .panel-default { 
 
    border-left: 0px !important; 
 
} 
 
.home-panels a:nth-child(even) .panel-default { 
 
    border-right: 0px !important; 
 
} 
 
.home-panels {} .panel-default { 
 
    border: 2.5px white solid; 
 
} 
 
.panel-body {}

<div class="home-panels"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     <a href="/inspirations/37-testing-to-see-border"> 
 
     <div class="white-link">Testing to See Border</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     <a href="/inspirations/36-testing-words"> 
 
     <div class="white-link">Testing Words</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <a href="/inspirations/35"> 
 
     <img class="testing-image" alt="This is a Goal-Setter &amp; Bucket List Maker" src="/system/inspirations/images/000/000/035/original/IMG_5106.JPG?1466979374"> 
 
    </a> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <a href="/inspirations/34"> 
 
     <img class="testing-image" alt="This is a Goal-Setter &amp; Bucket List Maker" src="/system/inspirations/images/000/000/034/original/IMG_5073.JPG?1466810578"> 
 
    </a> 
 
    </div>

Answer 1

당신은 잘못된 선택에 nth-child을 적용하는가, 여기에 현재의 선택에 의해 무시되고있다 :

.home-panels a:nth-child(odd) .panel-default 

당신은 a가 .home-panels의 자녀가 될 것이다 말하고있다 (OK입니다 altought는 그랜드 아이 사실입니다)하지만, 현재 HTML을주지 작업 결코이 규칙을 의미 .panel-default의 부모 (그래서 확인되지 않음) 마크 업.

그래서 대신 a의 a의 부모와 클래스 panel panel-default와 div,되어야하는 형제 자매 panel panel-default있다.

.panel-default:nth-child(odd) { 
 
    border-left: 0px 
 
} 
 
.panel-default:nth-child(even) { 
 
    border-right: 0px 
 
} 
 
.panel-default { 
 
    background: url("//dummyimage.com/200x200"); 
 
    border: 3px red solid; 
 
    height:200px; 
 
    width:200px; 
 
    display:inline-block; 
 
    margin:2px 
 
}

<div class="home-panels"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     <a href="/inspirations/37-testing-to-see-border"> 
 
     <div class="white-link">Testing to See Border</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
     <a href="/inspirations/36-testing-words"> 
 
     <div class="white-link">Testing Words</div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <a href="/inspirations/35"> 
 
     <img class="testing-image" alt="This is a Goal-Setter &amp; Bucket List Maker" src="/system/inspirations/images/000/000/035/original/IMG_5106.JPG?1466979374"> 
 
    </a> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <a href="/inspirations/34"> 
 
     <img class="testing-image" alt="This is a Goal-Setter &amp; Bucket List Maker" src="/system/inspirations/images/000/000/034/original/IMG_5073.JPG?1466810578"> 
 
    </a> 
 
    </div>