bootstrap 面板中的第 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 提供的内容

代码

.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 的 child（这没关系，虽然实际上是 grand-child），但是 parent .panel-default（所以不行），这意味着这个规则永远不会在你当前的 HTML 标记下起作用。

所以，a 必须是 div 和 class panel panel-default，也就是 [=14= 的 parent ] 和兄弟姐妹 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>

bootstrap 面板中的第 n 个子项被浏览器忽略

nth-child being ignored by the browser in bootstrap panels

css

css-selectors

pseudo-class

twitter-bootstrap

twitter-bootstrap-3