Question

我有以下css设置：

.dropdown dt { background:#e4dfcb !important; }
.dropdown-disabled { background:#dddddd important; color:#aaaaaa; }

所以在我的html代码中，我故意将dropdown-disabled类放在那里，这应该强制覆盖背景颜色......但是没有发生。

<dt id="dtTestID" class="dropdown-disabled">
   <a href="#"><span>Hello World</span></a>
</dt>

我做错了什么？啊...

编辑：

好的，我已将代码更新为以下内容：

.dropdown-enabled { background:#e4dfcb; }
.dropdown-disabled { background:#dddddd; }

.dropdown dt { background:#e4dfcb !important url(arrow.png) no-repeat scroll right center; }
.dropdown dt a { display:block; padding-right:20px; border:1px solid #d4ca9a; width:150px;}
.dropdown dt a:hover { color:#ffffff; border: 1px solid #d0c9af;}
.dropdown dt a span { color:#816c5b; cursor:pointer; display:block; padding:5px; }
.dropdown dt a span:hover { color:#ffffff; cursor:pointer; display:block; }

<dt id="dtTestID" class="dropdown-disabled"><a href="#"><span>Hello World</span></a></dt>

这适用于后台，我只需要在其他地方启用下拉菜单。但是，我现在遇到另一个（类似的）问题，我无法覆盖链接的样式。我试过以下......

将颜色覆盖为！important，并将我的禁用设置为新颜色。

。dropdown dt a span {color：＃816c5b！important;光标：指针;显示：块;填充：5像素; } .dropdown-disabled {background：#dddddd;颜色：#AAAAAA; }

有什么想法吗？

Answer 1

CSS中没有important修饰符，只有!important。试试这个：

.dropdown dt { background:#e4dfcb }
.dropdown-disabled { background:#dddddd !important; color:#aaaaaa; }

希望它有所帮助。

Answer 2

找到了解决方法...... 我不得不从我的dt中删除链接，然后用以下内容更新我的CSS：

.dropdown-enabled { background:#e4dfcb; }
.dropdown-disabled span { background:#dddddd; color:#aaaaaa; }

之后，我需要使用jQuery监视其他元素上的鼠标点击以手动切换为启用...并重新插入链接。

var dt = jQ(this).find("dt");
// put back the look of enabled the element
dt.removeClass("dropdown-disabled");
dt.addClass("dropdown-enabled");

// put back the link in there to trigger the dropdown
var newhtml = jQ('<a href="#"></a>').append(dt.html());
dt.html(newhtml);

如何覆盖<dt>背景颜色以模拟禁用？</dt>

2 个答案: