Question

我的HTML是由wordpress生成的。

<div class="header-main">
            <h1 class="site-title"><a href="http://wp-themes.com/" rel="home">Theme Preview</a></h1>

            <div class="search-toggle active">
                <a href="#search-container" class="screen-reader-text">Search</a>
            </div>

            <nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
                <h1 class="menu-toggle">Primary Menu</h1>
                <a class="screen-reader-text skip-link" href="#content">Skip to content</a>
                <div class="nav-menu"><ul><li class="page_item page-item-2"><a href="http://wp-themes.com/?page_id=2">About</a></li><li class="page_item page-item-46 page_item_has_children"><a href="http://wp-themes.com/?page_id=46">Parent Page</a><ul class="children"><li class="page_item page-item-49"><a href="http://wp-themes.com/?page_id=49">Sub-page</a></li></ul></li></ul></div>
            </nav>
        </div>

我想隐藏所有元素，但隐藏.page-item-2的元素，所以我使用：

.header-main .nav-menu li:not(.page-item-2) {
    display:none;
}

这样可行，但我也希望从选择器中排除.page-item-46：

.header-main .nav-menu li:not(.page-item-2) :not(.page-item-46) {
    display:none;
}

虽然不起作用。

Answer 1

元素.page-item-46不是后代，因此您将删除:not伪类之间的空格：

.header-main .nav-menu li:not(.page-item-2) :not(.page-item-46) {
                            /* remove this ^  */
    display:none;
}

EXAMPLE HERE

有关更基本的示例，请考虑以下事项：

<ul>
    <li class="one">one..</li>
    <li class="two">two</li>
    <li class="three">three</li>
</ul>

使用以下内容会从选择中排除.one / .two：(example)

ul li:not(.one):not(.two) {
    color:red;
}

以下内容并非(example)

ul li:not(.one) :not(.two) {
    color:red;
}

这两个都没有：(example)

ul li:not(.one,.two) {
    color:red;
}

这不起作用，因为它基本上选择了所有元素，因为两个选择器不是互斥的。 (example)

ul li:not(.one),
ul li:not(.two) {
    color:red;
}

Answer 2

虽然你得到了答案，但只是说如果你关心旧版浏览器你也可以这样做：

.header-main .nav-menu li.page-item-2, .header-main .nav-menu li.page-item-46 {
    display: list-item;
}
.header-main .nav-menu li {
    display: none;
}

Answer 3

使用此CSS

.header-main .nav-menu li:not(.page-item-2),.header-main .nav-menu li:not(.page-item-46) {
    display:none;
}

CSS不是选择器不工作

3 个答案: