한 div 요소에서 링크 색상을 변경하면 왜 다른 요소에서 변경됩니까?

Question

여기 내 CSS 코드 중 일부입니다. # container2 요소의 색을 변경하면 # container1 요소의 링크 색도 변경됩니다. 왜 이런거야?

#container1 { 
display:block; 
position:relative; 
margin: 0 auto 0 auto; 
width:auto; 
background-color: #f26822; 
} 
#container1 #mainnavigation { 
height:20px; 
width:960px; 
background-color: #f26822; 
margin: 0 auto 0 auto; 
} 

#container1 #mainnavigation ul { 
    list-style-type: none; 
    margin: 0; 
    overflow: hidden; 
    padding: 0; 
} 
#container1 #mainnavigation li { 
    background-color: #f26822; 
    float: left; 
    height: 20px; 
    width: 137px; 
} 

#container1 #mainnavigation a:link,a:visited { 
    color: #FFFFFF; 
    display: block; 
    font-weight: bold; 
    padding: 0%; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    width: 100%; 
    border-radius:10px; 
} 

#container1 #mainnavigation a:hover,a:active { 
    color: #27348B; 
    background-color:#FF8000; 
} 

링크의 첫 세트에 대한

그게 전부 코드, 아래의 다른 요소에 두 번째 링크에 대한 코드가

#container2 #content a:link,a:visited { 
font-family:calibri; 
font-size:16px; 
color: ; 
text-decoration:none; 
} 

#container2 #content a:hover,a:active { 
color: #000; 
} 

, 난 그냥 jsFiddle에 모든 코드를 입력하고 잘 작동 좋아하지만 때 내가 그것을 사용하지 않는 브라우저를 사용하여 테스트 해보십시오. 도움?

Answer 1

CSS를 다시 살펴보면 전역 수준에서 방문한 링크에 대한 스타일을 선언하고 있음을 알 수 있습니다. 대신, 당신이 각각의 부모에 의해 : link와 : hover를위한 스타일을 선언했듯이, 방문한 사람들을 위해 그렇게해야 할 것이다. JS 바이올린에

... 

#container1 #mainnavigation a:link, #container1 #mainnavigation a:visited { 
color: #FFFFFF; 
display: block; 
font-weight: bold; 
padding: 0%; 
text-align: center; 
text-decoration: none; 
text-transform: uppercase; 
width: 100%; 
border-radius:10px; 
} 

#container1 #mainnavigation a:hover, #container1 #mainnavigation a:active { 
color: #27348B; 
background-color:#FF8000; 
} 

#container2 #content a:link, #container2 #content a:visited { 
font-family:calibri; 
font-size:16px; 
color: #000; 
text-decoration:none; 
} 

#container2 #content a:hover, #container2 #content a:active { 
color: #000; 
}