:없는 선택이

Question

내가 워드 프레스에서 메뉴에 문제가 내가 Codepen에 다시 코드를 작성하려고했지만 나는 그것이 어느 쪽이 작동하지 않기 때문에 내가 뭔가 잘못하고 있다고 생각 작동하지 않습니다. 나는 를 사용하는 경우

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

: 여기에 문제가 선택 내 코드가 작동하지 않습니다하지하지만 난 그것을 삭제하면, 모든 요소와 함께 작동합니다.

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

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

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

 
.nav-primary li:first-child:hover 
 
{ 
 
\t position: relative; 
 
\t 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; 
 
}

<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>

또는 전체 코드 codepen에 대한 Here를 확인할 수 있습니다. 도움

Answer 1

당신이 목표하고자하는 태그가 .nav - 차의 자녀이며, .SUB 메뉴 클래스없이 다른 부모가 없기 때문에 그것은 작동하지 않습니다 주셔서 감사합니다.

그것은 다음과 같이 작동합니다

는

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

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

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

 
.nav-primary li:first-child:hover 
 
{ 
 
\t position: relative; 
 
\t 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>