CSS에서 여러 링크 스타일을 사용할 수 있습니까?

Question

이것이 가능합니까? 나는 온통 구글을 보았고 내가 찾고있는 해답을 찾을 수 없다. 여기에 질문 : div 머리글의 텍스트에 빨간색 호버가 있고 바닥 글의 div에있는 텍스트가 흰색 호버라고 할 수 있습니까?

아니면 그냥 가능하지 않으며 전체 문서에 대해 1 가지 스타일 만 설정할 수 있습니까?

나는 그것이 잘 설명되기를 바랍니다.

미리 감사드립니다.

Answer 1

이 좀 더 구체적인 됨으로써 개별적으로 스타일을 지정할 수 있습니다 다른 모든 요소와 같은 가능한 아주 많이 있습니다. 이 HTML이있는 경우

이 CSS와

<div id="top"> 
    <a href="#">First link</a> 
</div> 

<div id="bot"> 
    <a href="#">Second link</a> 
</div> 

당신이 모두 링크의 스타일을 것이다 :이 CSS와

a:hover { 
    color: #000; 
} 

을 당신은 개별적으로 스타일을 지정할 수 있습니다 :

#top a:hover { 
    color: #f00; 
} 

#bot a:hover { 
    color: #fff; 
} 

Answer 2

그럼 a : 링크가있는 요소를 선택하고 그런 스타일을 적용하면됩니다.

즉

#header a:hover { color: red; } 
#footer a:hover { color: white; } 

Answer 3

예 가능합니다. 그래서 당신은 다른 곳에서 같은 마우스 오버를 사용할 수 있지만

#header a:hover { 
    color: #f00; 
} 

#footer a:hover { 
    color: #0f0; 
} 

http://jsfiddle.net/wrygB/2/

이 분할 할 수 있습니다. 어떤 경우에는 다음을 수행하십시오.

그리고 나서 모든 요소에 기본 또는 하위 클래스를 적용하여 호버 효과를 적용 할 수 있습니다.

Answer 4

당신이 바로 그것을 후크 경우 원하는만큼 거의 많은 사람을 설정할 수 있습니다

:

/* every a:hover has color red */ 
    a:hover { color: red; } 
/* #footer a:hover has color green. */ 
    #footer a:hover { color: green; } 
/* Every link that has class ".ThisClass" will have yellow color */ 
    a.ThisClass:hover { color: yellow; }