：不是选择器不起作用

Question

我在Wordpress中遇到了一个菜单问题，我尝试在Codepen上再次编写代码，但我认为我做错了，因为它既没有工作也没有。这是问题所在：

    .nav-primary *:not(.sub-menu) a
{
  font-size: 20px;
}

如果我使用：not 选择器，我的代码不起作用，但如果我将其删除，则它适用于所有元素。

＆＃13;

＆＃13;

.nav-primary a {
color: white;
background-color: #3A3F4E;
border: 0;
}

.nav-primary li:nth-child(2)
{
	font-family: Oswald;
}

.nav-primary li:first-child
{
	font-family: Oswald;
	position: relative;
	top: -1px;
}

.nav-primary li:first-child:hover
{
	position: relative;
	top: -1px;
}

.nav-primary .sub-menu a {
color: white;
background-color: #3A3F4E;
}

.nav-primary a:hover {
color: white;
text-decoration: none;
background-color: #E56341;
}

.nav-primary > a
{
  font-size: 20px;
}

＆＃13;

<div class="nav-primary">
  <a>Home</a>
  <a>Home</a>
  <a>Home</a>
  <div class="sub-menu">
  <a>Home</a>
  <a>Home</a>
  <a>Home</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者您可以使用完整代码检查codepen bestproducts[element.shop_id]。谢谢你的帮助

Answer 1

它不起作用，因为您要定位的标记是.nav-primary的子标记，并且没有.sub-menu类的其他父标记。

它的工作原理如下：

.nav-primary a {
color: white;
background-color: #3A3F4E;
border: 0;
}

.nav-primary li:nth-child(2)
{
	font-family: Oswald;
}

.nav-primary li:first-child
{
	font-family: Oswald;
	position: relative;
	top: -1px;
}

.nav-primary li:first-child:hover
{
	position: relative;
	top: -1px;
}

.nav-primary .sub-menu a {
color: white;
background-color: #3A3F4E;
}

.nav-primary a:hover {
color: white;
text-decoration: none;
background-color: #E56341;
}

.nav-primary *:not(.sub-menu) a
{
  font-size: 20px;
}

<div class="nav-primary">
  <div class="dummy">
  <a>Home</a>
  <a>Home</a>
  <a>Home</a>
  </div>
  <div class="sub-menu">
  <a>Home</a>
  <a>Home</a>
  <a>Home</a>
  </div>
</div>