SSI에 가상 CSS 문제가 포함됨

Question

나는 personal site을 자바 스크립트로 가정에서 실행하도록 설정했으며 지금은 서버 측 포함으로 시작합니다. 내 사이트의 루트에 별도의 HTML 파일로 저장된 스타일 탐색 모음이 있습니다. 이 파일에는 스타일 (CSS)이 포함되어 있으며 스타일이 포함 된이 navbar를 포함하면 스타일은 navbar.html 파일에없는 다른 모든 것에 기인합니다. 코드 link here. 부분 코드.

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #333; 
width: 100%; 
} 

li { 
float: left; 
} 

li a, .dropbtn { 
display: inline-block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 

li.dropdown { 
display: inline-block; 
} 

이것은 많은 내 페이지에 포함되어있는 navbar.html 파일 내의 CSS의 짧은 섹션입니다. 이것은 네비게이션 자체의 스타일 (위의 링크와 동일한 navbar.html 파일에 있음)이며 그 자체 만의 스타일입니다. 나는 그 페이지들에 다른 (예를 들어) 정렬되지 않은리스트가 있다면 그것들은 또한 포함되어 있지만 navbar만을위한 스타일에 영향을 받는다는 것을 알았다. 내가 가진 또 다른 문제는 실제로 해당 페이지에있는 CSS가 navbar에 영향을 미쳤습니다 (예 : here navbar의 링크가 색상 변경됨).

내 생각에 전반적인 질문은 SSI를 포함시켜 실제 페이지에있는 다른 스타일과 구분되도록 만드는 방법입니다. 감사!

Answer 1

페이지의 CSS는 포함 된 페이지를 통해서라도 해당 페이지의 모든 내용에 영향을줍니다. 좀 더 구체적인 CSS 선택기를 사용하십시오 - 네비게이션에 클래스 나 ID를 부여한 다음 해당 클래스/ID 만 타겟팅하십시오.

<div id="navbar"> 
    <ul>...</ul> 
</div> 

#navbar ul { ... } 

#navbar li { ... } 

등