使用CSS选择器有选择地设置列表样式

Question

我有一个可以包含多个无序列表的元素。

我想选择性地设置分隔符的样式 - 即分隔LI元素的分隔符和分隔UL元素的分隔符。这是一些HTML：

我有效地尝试实现的目标是：

1. 所有内容均由UL分隔符或LI分隔符
分隔
2. 如果它是最后一个UL，则没有UL分隔符，但最后一个LI有一个分隔符
3. 如果它不是最后一个UL - 最后一个LI没有分隔符

---

<div>
    <ul>
        <li></li><!-- has blue bottom border -->
        <li></li><!-- has blue bottom border -->
        <li></li><!-- HAS NO BOTTOM BORDER -->
    </ul><!-- has green bottom border -->
    <ul>
        <li></li><!-- has blue bottom border -->
        <li></li><!-- has blue bottom border -->
        <li></li><!-- has blue bottom border -->
    </ul><!-- HAS NO BOTTOM BORDER -->
</div>

我已经提出了这个代码 - 但是最后一个UL dows的最后一个LI没有分隔符。

.nav-blue ul
{
    border-bottom:solid 0.5rem Green;
}

.nav-blue ul:last-child
{
    border-bottom:0;
}

.nav-blue li
{
    border-bottom:solid 0.1rem Blue;
}

.nav-blue li:last-child
{
    border-bottom:0;
}

/* This does not work */
.nav-blue not(ul:last-child) li:last-child
{
    border-bottom:solid 0.1rem Blue;
}

也许有更好的方法来实现这一点，我渴望得到帮助和进一步的建议。

提前致谢。

Answer 1

使用:not伪选择器（在您的示例中，您忘记了:），您可以这样写

/* 1 */ div li { 
            border-bottom: 1px blue solid; 
        }

/* 2 */ div ul:not(:last-child) { 
            border-bottom: 1px green solid; 
        }

/* 3 */ div ul:not(:last-child) li:last-child { 
            border-bottom: 0; 
        }

基本上这些规则是边界

1. 始终设置在li （蓝色）
上
2. 始终设置在ul （绿色）上，除非它是last-child
每个li:last-child都会删除
3. ，除非它属于最后一个ul

Answer 2

试试这个：http://jsfiddle.net/zj9v81t7/19/

和css代码：

ul , li{margin:0; padding:0}
div ul
{
    border-bottom:1px solid Green;
    padding-bottom:10px; margin-bottom:10px;

}
div ul li
{
    border-bottom:1px solid blue;
}
div ul li:last-child{
    border-bottom:0;
}

div ul:last-child
{
    border-bottom:0;
}

div ul:last-child li
{
    border-bottom:1px solid blue;
}