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

Question

我正在为我的 <li> 元素使用 [class*="menu-class-"]:not(.menu-class-2)，它工作正常。问题是当我想指向 <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 link：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 规则使用空格 select li 之后的锚点，它的每个 <a> 后代都将是大写。您需要使用 child select 或：

Updated JsFiddle

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

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

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

html

css

attributes

css-selectors