Question

嗨我的CSS有问题我之前使用过这个规则，但不知怎的，这次它不能正常工作

我正在尝试创建一个列表，每个列表项的底部都有一个边框，但是最后一个。我有以下代码：

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

Answer 1

如果你有这个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 仍然会有一个底部边框。

所以你需要删除它：

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

Answer 2

最后一个子边框没有在您的情况下正常工作。但你有写作风格

.menu li a,
.menu li div {
  display: block;
  padding: .5rem 0rem .5rem;
  border-bottom: .1rem solid #ccc
}

而是写两个不同的CSS规则：

.menu li a {
  display: block;
  padding: .5rem 0rem .5rem;
}
.menu li div {
  display: block;
  padding: .5rem 0rem .5rem;
  border-bottom: .1rem solid #ccc
}

Answer 3

更改

.menu li {
  border-bottom: .1rem solid #CCC;
  padding: 0;
}

.menu li:last-child {
  border: none;
}

到

.menu li:not(:last-of-type) {
  border-bottom: .1rem solid #CCC;
}

.menu li {
  padding: 0;
}

<强>编辑：

在a和div

删除边框底部

Answer 4

.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.*/

}

我为你创造了一个小提琴：https://jsfiddle.net/rakib32/bb0qokn1/9/。请看一下。

CSS：最后一个孩子没有边框

4 个答案: