html - CSS :not() with [attribute*=value] selector not works properly

Question

我正在使用 [class*="menu-class-"]:not(.menu-class-2)对于我的 <li>元素，它工作正常。问题是当我想指向 <a> 时<li> 内的标签, [class*="menu-class-"]:not(.menu-class-2) a .由于某种原因，它不起作用。

CSS:

.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) {
    display: table-cell;
}

.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) a {
    text-transform: uppercase;
}

HTML

<ul class="nav-menu" id="menu-main-navigation">
    <li class="menu-class">
        <a href="#12">Nav 1</a>
        <ul class="sub-menu">
            <li class="menu-class-3">
                <a href="#12">Nav 2</a>
                <ul class="sub-menu">
                    <li class="menu-class-2"><a href="#2">Anchor, it should be lowercase</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

问题是 <a>在<li class="menu-class-2">里面是大写的，但应该是小写的，因为我没有为这个元素添加任何属性。 <a> 的容器( <li class="menu-class-2"> ), 没有得到 display:table-cell属性，因此它可以正常工作。

JSFiddle 链接:http://jsfiddle.net/qnzos5t4/3/

Answer 1

原因是因为你确实有一个不是.menu-class-2的li :

<ul class="nav-menu" id="menu-main-navigation">
    <li class="menu-class">
        <a href="#12">Nav 1</a>
        <ul class="sub-menu">
            <li class="menu-class-3">  <!-- THIS ONE HERE -->
                <a href="#12">Nav 2</a>
                <ul class="sub-menu">
                    <li class="menu-class-2"><a href="#2">Anchor, it should be lowercase</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

由于您的 css 规则使用空格来选择 li 之后的 anchor ，因此每个 <a>它的后代，将是大写的。您需要使用子选择器:

Updated JsFiddle

.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) > a {