在bootstrap面板中浏览器忽略了nth-child

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>

<div id="listPerformers">
  <div class="performer" data-username="lula">lula</div>
  <div class="performer" data-username="hotesse1">hotesse1 </div>
  <div class="performer" data-username="marina">marina</div>
  <div class="performer" data-username="sabrina">sabrina</div>
  <div class="performer" data-username="aaa">aaa</div>
  <div class="performer" data-username="hotesse2" >hotesse2 </div>
  <div class="performer" data-username="julia">julia</div>
  <div class="performer" data-username="misssexy">misssexy</div>
  <div class="performer" data-username="guitarreblack">guitarreblack</div>
  <div class="performer" data-username="blacklove">blacklove</div>
  <div class="performer" data-username="ddd">ddd</div>
  <div class="performer" data-username="eee">eee</div>
  <div class="performer" data-username="anna">anna</div>
</div>

$('.performer').sort(function(a,b){
   return a.dataset.username > b.dataset.username
}).appendTo('#listPerformers')