Question

如果 li 标记有选中类，我在其中添加边框链接。另外，我检查 li 是否不是 ul 列表中的最后一个。

所有这些工作都与简单的选择器

有关

.advert-list-menu li:not(:last-child):not(.selected) a { border-right: 1px solid #c9c9c9; }

我需要的是，另外检查下一个 li 标签，也没有选择类，我试图像这样实现这个

.advert-list-menu li:not(:last-child):not(.selected) a + li:not(.selected) a { border-right: 1px solid #c9c9c9; }

但没有成功。关于jsfiddle的代码示例：http://jsfiddle.net/tzgyhdmk/ 这里的订阅必须没有右边界。

Answer 1

您无法查看以下兄弟姐妹以影响当前的兄弟姐妹。

但你可以看看以前的兄弟姐妹。

所以我建议您更改代码以将边框放在左侧

.advert-list-menu li:not(:first-child):not(.selected) a{ border-left: 1px solid #c9c9c9; }

然后添加

.advert-list-menu li.selected + li:not(.selected) a{border-left:none;}

覆盖/禁用.selected

之后的那个

http://jsfiddle.net/tzgyhdmk/2/

演示

Answer 2

只需使用Adjacent Sibling Selector即可。它比much better support更容易理解并且CSS3's negation selector（包括IE7）（在＆lt; IE9中会失败）。

<击>

.advert-list-menu li:not(:last-child):not(.selected) a { border-right: 1px solid #c9c9c9; }

<击>

/* put a left border on all but the first a */
.advert-list-menu li + li a { 
    border-left:1px solid #c9c9c9;
}
/* remove the border on the .selected a and the next one */
.advert-list-menu li.selected a, 
.advert-list-menu li.selected + li a { 
    border:none;
}

http://jsfiddle.net/tzgyhdmk/1/

＆＃13;

.advert-list-menu { width: 100%; display: inline-block; padding: 0; line-height: 47px; font-size: 12px; }
.advert-list-menu * { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; }
.advert-list-menu li { display: inline-block; text-align: center; }
/*.advert-list-menu li:not(:last-child):not(.selected) a { border-right: 1px solid #c9c9c9; }*/
    /* put a left border on all but the first a */
    .advert-list-menu li + li a { 
        border-left:1px solid #c9c9c9;
    }
    /* remove the border on the .selected a and the next one */
    .advert-list-menu li.selected a, 
    .advert-list-menu li.selected + li a { 
        border:none;
    }
.advert-list-menu li.selected { font-weight: bold; background: #fff; color: #000; filter: none; height: 55px; position: relative; top: 1px; padding-top: 5px; border: 1px solid #dedede; border-bottom: 0px; }
.advert-list-menu li a { color: inherit; padding: 0 20px; transition: all 200ms ease; line-height: 12px; display: inline-block; vertical-align: middle; }
.advert-list-menu li a:hover { color: #E00C18; text-decoration: none; text-shadow: 0px 0px 5px #fff; }

＆＃13;

<ul class="advert-list-menu">
            <li>
                    <a href="#">
                        <div class="icon-u-list"></div>
                        Adverts
                    </a>
            </li>
            <li class="accounts">
                <a href="#">
                    <div class="icon-u-money"></div>
                    Accounts                    <div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="icon-u-save"></div>
                    Subscriptions
                </a>
            </li>
            <li class="selected">
                <a href="#">
                    <div class="icon-u-hart"></div>
                    Saved
                </a>
            </li>
            <li>
                <a href="#" title="Mano informacija">
                    <div class="icon-user"></div>
                    My information
                </a>
            </li>
        </ul>

＆＃13;

Css，检查下一个选择器的类

2 个答案: