한 페이지에 여러 h6 헤딩의 다른 스타일링

-2

한 페이지에서 여러 h6 헤딩의 스타일을 다르게 지정하는 올바른 방법은 무엇입니까? 나는 생각했다 다음한 페이지에 여러 h6 헤딩의 다른 스타일링

CSS :

.content{ width:660px; overflow:hidden; } 

.content h6{ margin:25px 20px 0px 35px; 
      font-size:32px; 
      padding-bottom:5px; 
      font-family: 'Arial', sans-serif; 
} 

.blue { 
    color:#60817a; 
    border-bottom:2px solid #99bcb4; 
    text-shadow: 1px 1px 1px #99BCB4; 
} 

.black { 
     color:#000000; 
     border-bottom:2px solid #333333; 
     text-shadow: 1px 1px 1px #333333; 
    }

HTML :

<div class="content"> 
<h6 class="blue">Subtitle</h6> 

<div class="content"> 
<h6 class="black">Subtitle</h6>

출처

2012-02-04 Martijn

저에게는 효과가있는 것처럼 보입니다. 문제는 무엇이라고 생각하십니까? –

당신에게 적합한 것은 무엇이든 - 그러나 같은 웹 페이지에서 다른 제목 스타일을 사용하는 것은 싫어합니다 (예 : http://csslint.net/). – egasimus

@ Brian & ngen Thx, 나는 추가 수업을 제목에 추가하는 것이 적절하다고 생각하지 않았습니다. – Martijn

는 몇 가지 :

선택기를 들어 다른보다 우선하는 선택자 인 경우 specificity을 고려해야합니다. 귀하의 .blue 선택자는 해당 링크에 설명 된 규칙에 따라 .content h6 선택자와 같이 구체적이지 않습니다. content h6 선택자에 color: red을 추가하면 다른 규칙이 우선 적용됩니다. 두 번째 선택기 .content .blue을 대신 사용해보십시오.
blue은 클래스의 나쁜 이름입니다. 클래스 및 ID가 의미 론적으로 보이려면 모양이 아닌 (즉, CSS를 변경할 때 조금 어둡게 보이고 대신 빨간색이어야한다고 결정하는) 모양이 아닌 이름이 무엇인지 설명하는 이름을 선택해야합니다.

출처

2012-02-04 15:04:32 cmbuckley

한 페이지에 여러 h6 헤딩의 다른 스타일링

답변

관련 문제