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

Question

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

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

我想要有效实现的是：

一切都由 UL 分隔符或 LI 分隔符分隔
如果是最后一个UL，则没有UL分隔符，但最后一个LI有分隔符
如果不是最后一个 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; 
        }

基本上按照这些规则边框

始终设置为 li （蓝色）
始终设置为 ul （绿色） 除非它是 last-child
在每个 li:last-child 上删除，除非它属于最后一个 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;
}

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

Use CSS selectors to selectively style list

css

css-selectors