CSS:最后一个孩子没有边框 [英] CSS : last child no border

问题描述

我的CSS出现了问题，我以前曾经使用过此规则，但是这次不起作用

Hi I have a problem with my CSS I have used this rule before but somehow it's not working this time

我正在尝试创建一个列表，该列表在每个列表项的底部但最后一个带有边框.我有以下代码:

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>

推荐答案

如果您有此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
}

然后，您正在正确地从最后一个 li 中删除边框.但是， li 的任何链接或div 内部仍将具有底部边框.

Then you are correctly removing the border from the last li. However any link or div inside that li will still have a bottom border.

因此，您需要使用以下命令将其删除:

So you need to remove that with:

.menu li:last-child a,
.menu li:last child div {
  border-bottom: none
}

这篇关于CSS:最后一个孩子没有边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！