CSS :not() 与 [attribute*=value] 选择器无法正常工作答案

【问题标题】：CSS :not() with [attribute*=value] selector not works properlyCSS :not() 与 [attribute*=value] 选择器无法正常工作
【发布时间】：2015-05-14 22:14:51
【问题描述】：

我将[class*="menu-class-"]:not(.menu-class-2) 用于我的<li> 元素，它可以正常工作。问题是当我想指向<li>、[class*="menu-class-"]:not(.menu-class-2) a 内的<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>

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

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

【问题讨论】：

标签： html css attributes css-selectors

【解决方案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 之后的锚点，因此它的每个 <a> 后代都将是大写的。您需要使用子选择器：

Updated JsFiddle

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

【讨论】：