Question

这是小提琴：

这是布局的本质：

 <ul>
    <li>
        <div class="rel">
            <div class="abs">1</div>
        </div>
    </li>
    <li>
        <div class="rel">
            <div class="abs">2</div>
        </div>
    </li>
    ...etc
 </ul>

div帮助将文本放在相对容器和绝对容器中，以便进行类型定位和转换。

此Nav Bav目前如下所示：

1   /   2   /   3   /   4   /   5   /

我希望它放弃最后的＆＃34; /＆＃34;分隔符字符如下所示：

1   /   2   /   3   /   4   /   5

当我创建一个仅由ul和li项目组成的导航栏时，使用＆＃34; li：last-child：after＆＃34;选择器正常工作并消除最后一个分隔符。当我使用上面的技术创建它时，在li里面有2个div容器，我无法弄清楚我需要的选择器，以覆盖首先创建分隔符的：after选择器。

以下是我的尝试：

创建分隔符的选择器;

    ul > li > .rel > .abs:after {
        position: absolute;
        bottom: 0; 
        left: 55px;
        content: "/";
        font-size: 12px;
        color: black;
    }

选择器覆盖上面的选择器（我尝试了以下所有版本，但没有工作）：

    /* .rel > .abs ~ .rel > .abs { */
    /* li > .rel > .abs ~ li > .rel > .abs { */
    /* ul > li > .rel > .abs ~ ul > li > .rel > .abs { */
    /* .rel .abs:last-child { */
    /* .rel > .abs:last-child { */
    /* li > .rel > .abs:last-child { */
    ul > li > .rel > .abs:last-child {
        position: absolute;
        bottom: 0;
        /*left: 55px; */
        content: "+";
        font-size: 12px;
        color: black;
    }

这个最后一个选择器不是覆盖了分隔符，而是以某种方式消除了悬停（未提及，但你可以在jsfiddle中看到它）。这些最后几行在jsfiddle中被注释掉，因此您可以看到我在悬停时的效果。

感谢您对CSS选择器的尊重！

Answer 1

在CSS中添加以下类。它将删除＆＃34; /＆＃34;来自最后一个孩子。

ul > li:last-child > .rel > .abs:after {
content: " ";
}

DEMO

CSS last-child：之后没有消除UL中的最后一个分隔符

1 个答案: