2016-10-28 1 views
0

그래서 어떤 이유로 작동하지 않는 간단한 navbar가 있습니다. 다른 모든 링크와 페이지는이 코드를 제외하고 작동하며 다음 코드에서 누군가가 오류를 발견 할 수 있는지 궁금합니다. 'glob'이 노란색이 아닌 것을 주목하십시오. 그 규칙을 재정의하는 좀 더 구체적 인 규칙이 있다고 생각했지만 규칙이 있다고 생각하지 않습니다. 활성 클래스를 대상으로 지정할 경우navbar에 대한 의사 클래스가 작동하지 않습니다.

#subnav { 
 
\t height: 10%; 
 
\t text-align: center; 
 
\t background-color: green; 
 
\t width: 100%; 
 
} 
 
#subnav ul { 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t overflow: hidden; 
 
\t text-align: center; 
 
\t width: 100%; 
 
\t font-weight: bold; 
 
} 
 
#subnav li { 
 
\t display: inline-block; 
 
} 
 
#subnav li a { 
 
\t display: block; 
 
\t color: white; 
 
\t text-align: center; 
 
\t padding: 14px 16px; 
 
\t text-decoration: none; 
 
} 
 
#subnav li a:hover { 
 
\t color: yellow; 
 
} 
 
#subnav li a:active { 
 
\t color: yellow; 
 
}
<div id="subnav"> 
 
      \t <ul> 
 
    \t \t \t <li> <a href="sam.html">Sam </a></li> 
 
     \t \t <li> <a href="sam.html">Sam </a></li> 
 
    \t \t \t <li> <a href="sam.html">Sam </a></li> 
 
    \t \t \t <li> <a href="sam.html">Sam </a></li> 
 
      \t <li> <a href="sam.html">Sam </a></li> 
 
       <li> <a href="sam.html">Po </a></li> 
 
       <li> <a class="active" href="glob.html">Glob </a></li> 
 
       <li> <a href="sam.html">Donors </a></li> 
 
       
 
    \t \t </ul> 
 
     </div>

+0

을 (대신 :.주의) 나를 위해 – j08691

+0

작품 나에게 같은 모양이어야한다, on Chrome – LGSon

+0

Chrome 54.0.2840.71 m (64 비트) Windows 10. 저의 co.kr에 포함되어 있지 않은'color' 속성을 어딘가에 덮어 쓰는'.active' 클래스가있을 수 있습니다. de snippet. DevTools로 요소를 검사하십시오. – Ricky

답변

1

.active클래스이며 의사 선택기를 통해 주소 지정이 가능한 상태는 아닙니다. 그래서 그것에 대한 당신의 선택은

#subnav li a.active { 
     color: yellow; 
    } 

그들은 모든 행동

#subnav { 
 
\t height: 10%; 
 
\t text-align: center; 
 
\t background-color: green; 
 
\t width: 100%; 
 
} 
 
#subnav ul { 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t overflow: hidden; 
 
\t text-align: center; 
 
\t width: 100%; 
 
\t font-weight: bold; 
 
} 
 
#subnav li { 
 
\t display: inline-block; 
 
} 
 
#subnav li a { 
 
\t display: block; 
 
\t color: white; 
 
\t text-align: center; 
 
\t padding: 14px 16px; 
 
\t text-decoration: none; 
 
} 
 
#subnav li a:hover { 
 
\t color: yellow; 
 
} 
 
#subnav li a.active { 
 
\t color: yellow; 
 
}
<div id="subnav"> 
 
      \t <ul> 
 
    \t \t \t <li> <a href="sam.html">Sam </a></li> 
 
     \t \t <li> <a href="sam.html">Sam </a></li> 
 
    \t \t \t <li> <a href="sam.html">Sam </a></li> 
 
    \t \t \t <li> <a href="sam.html">Sam </a></li> 
 
      \t <li> <a href="sam.html">Sam </a></li> 
 
       <li> <a href="sam.html">Po </a></li> 
 
       <li> <a class="active" href="glob.html">Glob </a></li> 
 
       <li> <a href="sam.html">Donors </a></li> 
 
       
 
    \t \t </ul> 
 
     </div>

1

, 당신은하지 .active는 사용해야합니다 : 활성

그렇게 규칙이 될 것입니다 :

#subnav li a.active { 
    color: yellow; 
} 

를 : 액티브 의사 셀렉터가 약간 다르다. 여기에 좋은 설명이있다. https://css-tricks.com/almanac/selectors/a/active/ 하지만 코드에서 활성 클래스를 dding하고 css에서 나중에 사용하지 않습니다. 희망이 도움이됩니다.