jquery - 最初隐藏显示 :block to be shown with 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>显示为一个 block ，因此它有自己的一行。

#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

The 'hidden' class applied initially doesnt work

#cart_promocode a { display:block; }

比您的其他规则具有更高的特异性 ( 101 AFAIK )，在类之前指定 ID，您将具有更高的特异性 ( 110 AFAIK )。

Ids = 100，类 = 10，基本选择器 = 1。

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

两个选择器，因为第二个选择器将执行通用目标。