css - 如果 div 内容换行，则为条件 CSS

Question

我在页面顶部有一个导航栏。它只是由一个div包装风格化的a链接组成。提琴手

<div class="navigation">
    <a href="someplace">1</a>   
    <a href="someplace">2</a>
    <a href="someplace">3</a>
    <a href="someplace">4</a>   
</div>

当用户缩小页面并且链接超出窗口的宽度时，其中一些会掉到下面。我想要的是将边框放在除最后一个孩子之外的所有内容的底部 - 也就是说，由于窗口调整大小而不是实际代码放置，最后一个孩子刚刚成为最后一个孩子。这可能吗？

Answer 1

像这样的东西应该工作

@media (max-width: 100px) {
    .navigation a { border-bottom: 1px solid red; }
    .navigation a:last-child { border-bottom: none; } 
}
}

Answer 2

嗨，如果您想要行之间的分隔，您可以使用此代码来评估某些a元素是否与顶部分开：

$('.navigation a').each (function () {
        var off=$(this).offset().top;
        if (off > 10) {
            $('.navigation a').css('border-bottom','3px solid red');
        } else {
            $('.navigation a').css('border-bottom','none');
        }
    });

检查它在这里工作http://jsfiddle.net/LenMU/16/