요소의 CSS 스타일이 작동하지 않습니다.

Question

지금 부트 스트랩을 사용하고 있으며 CSS 파일에서 요소의 속성을 변경하는 데 문제가 있습니다.

예 : 색상 인라인 방법을 사용하여 링크가 잘 작동하지만, 내 CSS 파일에서 색상을 변경하려고하면 작동하지 않습니다. 예 : { 색상 : 빨간색; }

각 요소에 클래스를 제공하기는했지만 여전히 작동하지 않습니다. 여기

내 HTML과 CSS입니다 :

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container" id="cont1"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div id="navbar" class="collapse navbar-collapse pull-right"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#" class="nav-a">Home</a></li> 
     <li><a href="#about" class="nav-a">Over ons</a></li> 
     <li class="dropdown"> 
      <a id="vacatures" href="#" class="dropdown-toggle nav-a" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Vacatures <span class="caret"></span> </a> 
      <ul class="dropdown-menu" aria-labelledby="vacatures"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a id="nieuws" href="#" class="dropdown-toggle nav-a" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Nieuws <span class="caret"></span> </a> 
      <ul class="dropdown-menu" aria-labelledby="nieuws"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a id="werkgevers" href="#" class="dropdown-toggle nav-a" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">   Werkgevers <span class="caret"></span> </a> 
      <ul class="dropdown-menu" aria-labelledby="werkgevers"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li role="separator" class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     <li><a href="#contact" class="nav-a">Contact</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

내가 탐색 안에이에 요소에 액세스하려고보다 :이 기호가있는 문제가 왜

a { 
    color: red; 
{ 
or 
.nav-a {color: red;} or li.nav-a , li a etc. 

누군가를 설명시겠습니까 요소?

CSS 파일 :

는

body, html { 
padding: 0; 
margin: 0; 
} 

nav { 
width: 100vw; 
padding: 0; 
margin: 0; 
} 

.navbar-default { 
background-color: white; 
height: 120px; 
} 


nav li { 
font-size: 18px; 
padding-top: 41px; 
} 

li.nav-a { 
color: red; 
}  

Answer 1

귀하의 문제는 여기에 있습니다

li.nav-a { 
 
    color: red; 
 
}

그것은해야한다 :

li.nav a { 
 
    color: red; 
 
}

<a> 태그에 액세스하려면 "-"기호를 제거하십시오.

편집 : 아니면 당신이 의미 : nav-a 이후

li .nav-a { 
 
    color: red; 
 
}

클래스 이름입니다 (I 이전에 그것을 통지하지 않았다), 다음 부모는 이러한 수도, <li>입니다 당신의 문제를 해결하십시오. li과 .nav-a을 분리하면됩니다.

Answer 2

제 생각에는 CSS 스타일 시트 뒤에 부트 스트랩을 포함시켜야하기 때문입니다. 이 상황에서 부트 스트랩 CSS는 외부 스타일 시트를 덮어 씁니다. 포함 순서 변경을 시도 할 수 있습니다.

두 번째 시도는 예를

li.nav-a{ 
color: red!important; 
} 

에 대한 !important 지시문을 추가 할 수 있습니다하지만 당신의 선택은 당신에 대한 모든 링크를 원하는 경우에 당신이

.navbar-nav a{ 
    color: red; 
} 

같은 예를 들어 사용하여이 작업을 수행 할 수 있습니다 나쁜 빨간색으로 표시됩니다.

Answer 3

이 질문에 대한 답변을 직접 드릴 수는 없지만 나중에 참조 할 수 있도록 FireBug for Firef 황소와 요소를 검사하는 데 사용 ...CSS 스타일 목록과 해당 요소에 적용된 방법이 RHS에 표시되어야합니다.