我有<%= 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 & 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 & Bucket List Maker" src="/system/inspirations/images/000/000/034/original/IMG_5073.JPG?1466810578">
</a>
</div>
最佳答案
您将 nth-child
应用于错误的选择器,这是您当前的选择器:
.home-panels a:nth-child(odd) .panel-default
你是说 a
是 .home-panels
的 child (这没关系,事实上它是一个孙子),但是 的 parent >.panel-default
(所以不行),这意味着这个规则永远不会在你当前的 HTML 标记下起作用。
因此,a
必须是具有类 panel panel-default
的 div
,它是 的父级>a
和 which 作为兄弟 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 & 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 & Bucket List Maker" src="/system/inspirations/images/000/000/034/original/IMG_5073.JPG?1466810578">
</a>
</div>
关于css - 在 Bootstrap 面板中浏览器忽略了第 nth-child,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38043891/