如何覆盖脚本生成的重要CSS规则

Question

我有来自外部服务的js插件。这个脚本已经构建了自己的css，但它的规则并不适合我的布局。所以我需要用700px改变540：

#chat-container.bbhorizontal .main .booking {
margin-top: 0;
min-width: 540px !important;
}

Bugzilla的路径：

<div class="main">
    <form name="chat">
      <div class="booking">

我试过了：

#div main.chat.booking {
display: block;
visibility: visible;
min-width: 800px !important important;
margin-top: 0;
}

没有成功...... 我怎么能做到这一点？谢谢。

我更喜欢用c编程css。更新请看图片：

Answer 1

为选择器添加更多特异性：

#chat-container.bbhorizontal .main form[name="chat"] .booking {
  min-width: 700px !important;
}

应该这样做......

Answer 2

.main form .booking[style]{
    display: block;
    visibility: visible;
    min-width: 700px !important;
    margin-top: 0;
}

jquery的

$("#chat-container.bbhorizontal .main .booking").css("min-width","700px !important");

Answer 3

您只需要比您希望覆盖的specific selector更多{{3}}，并使用!important。

例如：

html #chat-container.bbhorizontal .main .booking {
   min-width: 800px !important;
}

选择器中的html是重要的一点。这使得此选择器比您的脚本生成的更具体。

注意：你不必使用html，我只知道它会起作用，因为一切都在html元素之下。