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），在课前指定ID并且您将具有更高的特异性（110 AFAIK）。

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

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

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

最初隐藏显示：用jquery.show（）显示的块

1 个答案: