Html CSS：最后一个孩子没有边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31690906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS : last child no border
提问by Hannah
Hi I have a problem with my CSS I have used this rule before but somehow it's not working this time
嗨，我的 CSS 有问题，我以前使用过这条规则，但这次不知何故不起作用
I am trying to make a list that has a border on the bottom of every list item but the last. I have the following code:
我正在尝试制作一个列表，该列表的每个列表项的底部都有一个边框，但最后一个。我有以下代码：
.menu li {
border-bottom: .1rem solid #CCC;
padding: 0;
}
.menu li:last-child {
border: none;
}
.menu li a,
.menu li div {
display: block;
padding: .5rem 0rem .5rem;
border-bottom: .1rem solid #ccc
}<div class="panel">
{% comment %}
{% endcomment %}
<h1>All {{team.abbrev}} {% trans "Songs" %}</h1>
{% for chant in chants %}
{% with chant.team as team %}
<ul class="menu">
<li>
<span>
<h6 style="margin-bottom:0;">
<a href="{% url 'chant' team.slug chant.slug %}">{{ forloop.counter}}) {{ chant.name }}</a>
</h6>
</span>
</li>
</ul>
{% if forloop.counter == 5 %}
{% include 'inc/adsense_listing.html' %}
{% endif %}
{% endwith %}
{% endfor %}
</div>回答by Paulie_D
If you have this CSS
如果你有这个 CSS
.menu li {
border-bottom: .1rem solid #CCC;
padding: 0;
}
.menu li:last-child {
border: none;
}
.menu li a,
.menu li div {
display: block;
padding: .5rem 0rem .5rem;
border-bottom: .1rem solid #ccc
}
Then you are correctly removing the border from the last li. However any link or div insidethat liwill still have a bottom border.
然后您正确地从最后一个li. 然而任何链接或DIV里面那li将还有底部边框。
So you need to remove that with:
所以你需要删除它：
.menu li:last-child a,
.menu li:last child div {
border-bottom: none
}
回答by Prasad
The last child border none is working fine in your case. But you have written style for
在您的情况下，最后一个子边框 none 工作正常。但是你已经写了风格
.menu li a,
.menu li div {
display: block;
padding: .5rem 0rem .5rem;
border-bottom: .1rem solid #ccc
}
Instead write in two different css rules:
而是写在两个不同的 css 规则中：
.menu li a {
display: block;
padding: .5rem 0rem .5rem;
}
.menu li div {
display: block;
padding: .5rem 0rem .5rem;
border-bottom: .1rem solid #ccc
}
回答by Peter Wong
Change
改变
.menu li {
border-bottom: .1rem solid #CCC;
padding: 0;
}
.menu li:last-child {
border: none;
}
to
到
.menu li:not(:last-of-type) {
border-bottom: .1rem solid #CCC;
}
.menu li {
padding: 0;
}
Edited:
编辑：
Remove your border-bottom at aand div
删除您的边框底部a和div
回答by Rakib
.menu li a,
.menu li div {
display: block;
padding: .5rem 0rem .5rem;
border-bottom: .1rem solid #ccc;/* if you remove this border then it will completely remove the border. Because of this last item border is showing.*/
}
}
I have created a fiddle for you: https://jsfiddle.net/rakib32/bb0qokn1/9/. Please have a look at it.
我为您创建了一个小提琴：https: //jsfiddle.net/rakib32/bb0qokn1/9/。请看一看。
