第n個孩子被瀏覽器在引導面板忽略

Question

我有<%= render @inspirations %>，這使得4點啓示：

查看代碼

<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孩子（這是確定的，altought事實上是一個盛大的孩子），但.panel-default父（這樣也不行），這意味着該規則永遠不會成功鑑於你目前的HTML標記。

所以，代替a的必須是div與panel panel-default類，這是a的父母和兄弟姐妹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>