棘手的CSS选择器

Question

我需要一段CSS代码（或狡猾的黑客），它会在产品页面上指定下拉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。如果你还没有使用它，我强烈推荐它。