처음에는 디스플레이를 숨 깁니다 : jquery.show()로 표시된 블록

Question

불필요한 마크 업을 최소화하고 최적의 CSS를 사용하는 것이 더 좋습니다.

<label id="cart_promocode">Promo-code: 
    <span><%= Html.TextBox("PromoCode") %> 
     <a href="#" id="lnkApplyCoupon" class="hidden">Apply Coupon</a> 
    </span> 
</label> 

'쿠폰 적용'링크는 텍스트 상자 아래에 위치해야합니다. 이것은 사용중인 CSS입니다. <A>은 블록으로 표시되므로 자체 줄이 표시됩니다.

#cart_promocode a 
{ 
    display: block; 
    margin: 4px 0 0 0; 
    font-size: 93%; 
    color: Blue; 
} 

.hidden { 
    display: none; 
} 

내가 보여와 jQuery를 사용하여 숨길 수 :

$('#lnkApplyCoupon').show() and hide() 

문제는 내가 항목이 처음에 숨겨져 할 것입니다. '숨겨진'클래스는 초기에는 적용되지 않았습니다. 과에 -

내가 함께 온 가장 좋은 방법은

$(function() { 
    $('#lnkApplyCoupon').hide(); 
}); 

이것은 페이지가로드되지만 사용자 나던 경우 다음 자바 스크립트가 활성화가 초기에 숨겨 않는 경우에 적용 쿠폰 링크를 숨길 것입니다 사실 그 경우에 나는 그것을 나타 내기를 원하지 않는다.

내가 누락 된 부분은 CSS에 대한 트릭이나 다른 접근 방식입니다.

Answer 1

는 '숨겨진'클래스는 나던 일

#cart_promocode a { display:block; } 

는 다른 규칙보다 더 높은 특이성 (101 AFAIK)가, 클래스하기 전에 ID를 지정하고이있을 것이다 처음 적용 높은 특이성 (110 AFAIK).

IDS = 100 클래스 = 10, 기저 선택기 = 1

#cart_promocode .hidden, .hidden { display:none; } 

두 번째 선택기는 보편적 인 타겟을 때문이다.