Первоначально скрывать отображение: блок, который будет показан с помощью 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();
});

Это позволит скрыть ссылку применения купона при загрузке страницы, но затем, если у пользователя не включен Javascript, она не будет изначально скрыта - и фактически в этом случае я не хочу, чтобы она когда-либо появлялась.

Чего мне не хватает - трюк или другой подход к моему CSS.

Answer 1

Первоначально примененный скрытый класс не работает

#cart_promocode a { display:block; }

Имеет более высокую специфичность (101 AFAIK), чем ваше другое правило, укажите идентификатор перед классом, и вы получите более высокую специфичность (110 AFAIK).

Идентификаторы = 100, классы = 10, базовые селекторы = 1.

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

Два селектора, потому что второй сделает универсальную цель.