2014-03-13 5 views
0

내 탐색 표시 줄에 대한 정렬되지 않은 목록에서 스타일 글꼴 색을 설정하면 어떻게 특정 요소의 .class를 사용하여이를 수행 할 수 있습니까?활성 링크 스타일링 도움이 필요합니다

예를 들어, 여기 내 탐색의 :

서비스
소개
은 우리에게

연락 그래서 내가 # 000로 탐색 글꼴 색상에 대한 내 CSS에서 설정합니다.

이제 클래스 중 특정 색상으로 만 요소 중 하나를 타고 싶으면 어떻게해야합니까? 나는 그들 중 한 명에게 수업을 사용하려고했기 때문에 그것을 타지 않았다.

+1

귀하의 CSS와 HTML을 게시하십시오. – j08691

+0

여기에 코드를 게시하는 데 어려움을 겪고 있습니다. 그래도 1 분 내놔, 내가 올리 겠어. – John

답변

0

활성 : pseudo element을 사용할 수 있습니다.

은 HTML 인 경우 :

nav a { 
    color: #000; 
    font-size: 14px; 
    font-weight: 600; 
} 

nav a:hover { 
    color: #3e82f7; 
} 

nav a:active { 
    color: #db4437; 
} 

nav a:visited { 
    color: #ffeb3b; 
} 

당신은 사용자가 어떤 페이지를 표시하려는 경우, 당신은 아마 당신을 구성하려면 :

<nav> 
    <ul> 
     <li><a href="home.html">Home</a></li> 
     <li><a href="/services">Services</a></li> 
     <li><a href="/about">About</a></li> 
     <li><a href="/contact">Contact</a></li> 
    </ul> 
</nav> 

당신은 CSS와 함께이 작업을 수행 할 수 있습니다 이 라인을 따라 HTML :

<nav> 
    <ul> 
     <li><a class="current-page" href="home.html">Home</a></li> 
     <li><a href="/services">Services</a></li> 
     <li><a href="/about">About</a></li> 
     <li><a href="/contact">Contact</a></li> 
    </ul> 
</nav> 

그리고 당신의 CSS :

내가 질문을 읽으면 {# 000 색상을} 각 요소들이 자신의 리튬 미만인 경우 당신이 그 리의이 리 클래스 = "홈"홈 리 같은과 CSS의 중 하나를 설정할 수 있습니다 는
nav a { 
    color: #000; 
    font-size: 14px; 
    font-weight: 600; 
} 
.current-page { 
    color: #3e82f7; 
} 
2

.home를 넣어 이게 처음이라면 미안하지만 도움이 될 것입니다. 죄송하지만 코드로 작성하겠습니다 만이 사이트에 익숙해 져야합니다.

+2

환영합니다! 많은 사람들이 HTML, CSS 및 JS가 필요한 점을 설명하기 위해 jsfiddle 또는 codepen을 사용하지만 답변이 간결한 경우 (사용중인 경우와 같이) 사용하는 형식은 전혀 문제가되지 않습니다. – SwankyLegg

관련 문제