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

Updated JsFiddle

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

CSS：not（），[attribute * = value]选择器不能正常工作

1 个答案: