CSS를 사용하여 하이퍼 링크를 개별적으로 스타일을 지정하려면 어떻게해야합니까?

Question

다른 하이퍼 링크의 스타일을 다른 방식으로 지정하고 싶습니다. 지금은 하이퍼 링크 인 버튼이 있는데 하이퍼 링크처럼 행동해야하는 텍스트를 추가하려고합니다. 두 하이퍼 링크의 스타일을 함께 지정하지 않으면 어떻게합니까? 나는 각 하이퍼 링크 등 다양한 색상, 위치를 갖고 싶어

CSS

.example2 { 
    text-decoration: none; 
    font-size: 14px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    background-color: #CC4A31; 
    color: #444; 
    border-radius: 9px; 
    position: absolute; 
    top: 16px; 
    left: 38px; 
    height: 50px; 
    width: 145px; 
    webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); 
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); 
    vertical-align: middle; 
    text-align: center; 
    line-height: 50px; 
} 

.example { 
    color: black; 
} 

HTML

<div class="example2"> 
    <a href="">GameTrade</a> 
</div> 

<div class="example"> 
    <a href="">Sign in</a> 
</div> 

지금은 다른 하이퍼 링크를 추가하려면 어떻게, 그 별도로 스타일인가?

Answer 1

무엇 당신이 스타일을 호출하는 경우에 당신은 계단식 스타일 시트의 약자라고도 CSS를 모른다는, 언어의 이러한 유형의 규칙 사이의 계층 구조를 지정하는 데 무엇보다도을 수행 할 수 있습니다.

는 <a id="btnSubmit">submit</a> (CSS 당신이 3 개 기본 스타일 규칙의 유형, 요소의 태그를 대상으로 사람, 요소 ( <a class="foo">my link</a>)의 클래스를 대상으로 사람과 ID로 요소를 대상으로 사람을 가질 수있다,이 말씀을 데), 나는 분명히 당신이 이해하기 쉽도록 여기에 많은 정보를 숨기고있다.

목표를 달성하려면 태그 <a>을 사용하여 요소를 타겟팅하는 규칙을 만들고 규칙에서 모든 링크에 일반적인 속성을 지정하십시오.

이것은 이미 가지고있는 것을 제공합니다. 이제는 두 가지 옵션이있는 다른 링크를 타겟팅하거나 각기 다른 ID를 지정하고 각각을 대상으로 지정하거나 클래스 속성에 하나의 클래스를 추가하여 두 속성을 구분할 수 있습니다. 여기

은 예입니다

HTML

<a class="link-trade1" href="">GameTrade 1</a><br/> 
<a class="link-trade2" href="">GameTrade 2</a> 

CSS

a { 
    text-decoration: none; 
    font-size: 14px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    background-color: #CC4A31; 
    color: #444; 
    border-radius: 9px; 
    webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); 
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); 
    vertical-align: middle; 
    text-align: center; 
} 

.link-trade1{ 
    position: absolute; 
    top: 16px; 
    left: 38px; 
    height: 50px; 
    line-height: 50px; 
    width: 145px; 
} 

.link-trade2{ 
    position: absolute; 
    top: 16px; /* other y position for the link 2 */ 
    left: 38px; /* other x position for the link 2 */ 
    height: 50px; 
    line-height: 50px; 
    width: 145px; 
} 

당신이 다시 사용할 의도하지 않으면

당신은 ID에 대해 클래스 이름을 전환 할 수 있습니다 해당 특정 클래스를 대상으로하는 규칙 당신은 프리먼, CSS와 HTML에 새로운 경우

어쨌든, 당신이 읽을 수 book 아주 좋은있다. 해피 코딩.

업데이트

업데이트 된 질문이 좋은 예입니다, 그냥이를보고 :

/* this rule targets all hyperlinks inside, elements (div in your case) with attribute class="example" */ 
.example a{ 
    ... 
} 

/* this rule targets all hyperlinks inside, elements with attribute class="example2" */ 
.example2 a{ 
    ... 
} 

을 그래서 당신이 볼 수 있듯이, 내가 얘기 한 계층 구조를 기억 하는가? 이 때문에, 위의 예제에서는 먼저 특정 div를 예제 클래스 또는 example2 클래스로 대상으로 지정한 다음 내부에서 스타일을 지정할 요소를 지정합니다. 보다 정교한 규칙을 세울 수 있습니다!

Answer 2

당신의 HTML

<div class="example2"> 
    <a href="">GameTrade</a> 
</div> 

<div class="example"> 
    <a href="">Sign in</a> 
</div> 

내가 CSS는 당신을 무시 있기 때문에 스타일링이 작동하지 않습니다 추측하고있어 사용. 이 CSS를 사용해보십시오 :

.example2 a { 
    color: #444; 
} 

.example a { 
    color: black; 
} 

그래도 작동하지 않으면! important 태그를 추가하십시오.