Html CSS选择器不工作
我的HTML是由wordpress生成的Html CSS选择器不工作,html,css,css-selectors,Html,Css,Css Selectors,我的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"> &l
<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-46
:
.header-main .nav-menu li:not(.page-item-2) :not(.page-item-46) {
display:none;
}
但这不起作用。使用此CSS
.header-main .nav-menu li:not(.page-item-2),.header-main .nav-menu li:not(.page-item-46) {
display:none;
}
元素
.page-item-46
不是后代,因此您需要删除:not
伪类之间的空格:
.header-main .nav-menu li:not(.page-item-2) :not(.page-item-46) {
/* remove this ^ */
display:none;
}
对于一个更基本的例子,考虑以下内容:
<ul>
<li class="one">one..</li>
<li class="two">two</li>
<li class="three">three</li>
</ul>
以下内容不适用:
这也不是:
这也不起作用,因为它本质上选择了所有元素,因为两个选择器不是互斥的
虽然你得到了答案,但只要说如果你关心较旧的浏览器,你也可以这样做:
.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;
}
这隐藏了它们中的每一个,因为2不是46,46也不是2。有趣的是,我知道我错在哪里了。我想这会在我的网站上起作用。让我测试一下,如果您使用jQuery,并且想知道为什么
:not(.one,.two)
在这里不起作用,请参阅“谢谢”。这是个好主意。真不敢相信我竟然没想到!
ul li:not(.one):not(.two) {
color:red;
}
ul li:not(.one) :not(.two) {
color:red;
}
ul li:not(.one,.two) {
color:red;
}
ul li:not(.one),
ul li:not(.two) {
color:red;
}
.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;
}