css - 棘手的 CSS 选择器

Question

我需要一段 CSS 代码（或狡猾的 hack），它将产品页面上的下拉 DIV 的宽度指定为 436 像素的宽度：

http://warehouse.haddrellspoint.com/product/calcutta-can-bottle-coolers-149252-1.htm

（点击产品价格下的“选择选项”查看有问题的DIV）

麻烦制造者 DIV 的类名是“ddChild”。但是，我提出的用于修改其宽度的任何和所有 CSS 声明都被忽略了。

谢谢您的帮助！

Answer 1

尝试这个：

#sevarationlist_msdd .ddChild {
    width:436px !important;
}

由于父级的 id 选择器更具体，它应该覆盖现有的!important宽度设置336px（见下图）。地狱，你甚至可以侥幸逃脱，width:auto !important;如果将来由于某种原因宽度不同，这将避免头痛。

Answer 2

我玩过你的页面。在此处删除宽度元素：

<div id="sevariationlist_child" class="ddChild" style="height: 157px; z-index: 4999; display: block; width: 470px;"> <!--REMOVE WIDTH -->

和这里：

.dd .ddChild {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    display: none;
    margin: 0;
    overflow-x: hidden !important;
    overflow-y: auto;
    position: absolute;
    width: 336px !important;/*REMOVE THIS*/
}

然后在这里应用宽度：

.dd .ddChild a.selected {
    background-color: #999999;
    color: #FFFFFF;
    width: 500px; /*Visible width*/
}

我使用 FireBug 并在其中修改 CSS 发现了这一点。如果您还没有使用它，我强烈推荐它。