w3.css가 내 맞춤 스타일을 변경합니다.

나는 탭을 만들 때 다음과 같은 html 코드를 사용하고 있습니다. 또한 일부 제목 형식을 수정하려고하는 사용자 지정 CSS를 사용하고 있습니다. 다음 코드()의 네 번째 줄을 제거하면 스타일이 잘 작동합니다. 그러나이 줄을 포함 시키면 글꼴 유형을 포함하여 스타일이 바뀝니다. 이 문제를 어떻게 해결할 수 있습니까?w3.css가 내 맞춤 스타일을 변경합니다.

  <html> 
     <title>W3.CSS</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"/> 
     <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"/> 
     <body> 

     <div class="w3-container" style="margin-top: -50px;"> 
      <ul class="w3-navbar w3-black"> 
      <li><a href="javascript:void(0)" class="tablink w3-blue" onclick="openCity(event, 'London');">London</a></li> 
      <li><a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'Paris');">Paris</a></li> 
      <li><a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'Tokyo');">Tokyo</a></li> 
      </ul> 

      <div id="London" class="w3-container w3-border city"> 
      <h2>London</h2> 
      <p>London is the capital city of England.</p> 
      </div> 

      <div id="Paris" class="w3-container w3-border city" style="display:none"> 
      <h2>Paris</h2> 
      <p>Paris is the capital of France.</p> 
      </div> 

      <div id="Tokyo" class="w3-container w3-border city" style="display:none"> 
      <h2>Tokyo</h2> 
      <p>Tokyo is the capital of Japan.</p> 
      </div> 
     </div> 

     <script> 
     function openCity(evt, cityName) { 
      var i, x, tablinks; 
      x = document.getElementsByClassName("city"); 
      for (i = 0; i < x.length; i++) { 
       x[i].style.display = "none"; 
      } 
      tablinks = document.getElementsByClassName("tablink"); 
      for (i = 0; i < x.length; i++) { 
       tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); 
      } 
      document.getElementById(cityName).style.display = "block"; 
      evt.currentTarget.className += " w3-red"; 
     } 
     </script> 
     </body> 
     </html>

출처

2017-02-01 user570593

"나는 또한에 시도하는 사용자 정의 CSS를 사용하고 당신의 스타일을 변경하지 않고 잘 작동합니다 삭제 일부 제목 형식을 수정하십시오. " - 당신이 제공 한 코드가 아닙니다. – Quentin

"글꼴 유형을 포함하여 내 스타일이 변경되는이 줄을 포함하면 어떻게 해결할 수 있습니까?" - w3.css가 변경 한 내용을 마음에 들지 않는다면 포함시키지 마십시오 (일반적으로 W3School의 어떤 것도 피하는 것이 가장 좋습니다) 또는이를 덮어 쓰는 스타일을 작성하십시오. (캐스케이드에서 읽으십시오, CSS의 매우 기본적이고 중요한 부분입니다). – Quentin

또한

이 w3.css 파일을 열고 세계적으로 적용되는 스타일을 제거 같은 문제 발견 해결에 직면했다.

html {// 스타일}

body {스타일}과 같습니다.

클래스를 기반으로 스타일을 적용하면됩니다. 은 .w3-green {// styles}과 같습니다. W3 입력 {// 스타일} 귀하의 경우에는

1에서 w3.css 파일의 37 라인 다음은

출처

2017-02-23 07:37:00

w3.css가 내 맞춤 스타일을 변경합니다.

답변

관련 문제