Container Div를 사용하는 CSS 하위 링크 CSS

div 안에 3 개의 div가 있습니다. 주 div와 하위 div의 스타일 링크를 CSS로 설정했습니다. 그러나 div1 링크는 div1 스타일을 사용하는 것처럼 보이지 않습니다.Container Div를 사용하는 CSS 하위 링크 CSS

HTML

<div id="content"> 
    <div class="div1">Sort By: <a href="" id="list_users_title" >A-Z</a>/<a href="" id="oneline">Genre</a></div> 
     <div class="div2"> 
     <p>Random</p> 
     </div> 
     <div class="div3"> 
     <p>Random</p> 
     </div> 
    </div>

CSS

.div1 { 
font-family: 'Oswald', sans-serif; 
font-size:16px; 
color:#414042; 
text-transform:uppercase; 
text-align:right; 
margin-top:-26px; 
margin-bottom:18px; 
} 

.div1 a {color:#414042; text-decoration: none; } 
.div1 a:visited {color:#414042; text-decoration: none;} 
.div1 a:hover { color: #b91200; text-decoration: underline; } 


#content a {color: #b91200; text-decoration: none;} 
#content a:visited {color: #b91200; text-decoration: none;} 
#content a:hover { text-decoration: underline; } 

#content { 
    float: left; 
    width: 668px; 
    margin-left:50px; 
    margin-right:50px; 
    padding-top:42px; 
}

출처

2012-06-12 Storm3y

저에게 잘 작동합니다. http://jsfiddle.net/9Wvbs/ – MarcinJuraszek

링크가 빨간색 일 때 분명히 회색 인 반면 링크가 "잘 작동합니다"라고 말하는 이유가 표시되지 않습니다. –

예상되는 스타일은 무엇입니까? '#content a'는 더 높은 특이성을 가지므로'.div1 a'의 스타일을 덮어 씁니다. –

#content a는 .div1 a보다 높은 특이성을 가지고 있으므로 링크 아웃 #content a에 따라 스타일오고있다. 단지 .div1 a 대신 #content .div1 a을 사용해보십시오.

출처

2012-06-12 19:11:54

+1 ... 내 연결 및 따라서 내 대답이 너무 느리다 – redlena

완벽한 작품, 감사합니다 여러분. – Storm3y

당신은 .div1 앵커 태그에 대한 스타일 캐스케이드 더 구체적으로 확인해야합니다 :

#content .div1 a {color:#414042; text-decoration: none; } 
#content .div1 a:visited {color:#414042; text-decoration: none;} 
#content .div1 a:hover { color: #b91200; text-decoration: underline; }

이것은 그들이 #content에게 스타일의 폭포를 오버라이드 (override) 할 수 있습니다.

출처

2012-06-12 19:18:34 redlena

Container Div를 사용하는 CSS 하위 링크 CSS

답변

관련 문제