Question

我在我的网页中使用第三方javascript库（我只是将其称为“jslib”），当点击某个链接时，动态生成并在我的页面上显示iframe。我试图覆盖iframe上的一些样式。在某些情况下，我可以做到，但在一种情况下我不能。看看：

enter image description here

请注意，我的border样式（lower，inside styles.css第22行）被jslib的border样式“0”覆盖。

这是jslib引用：

<script type="text/javascript" src="https://www.paypalobjects.com/js/external/dg.js"></script>

我尝试了以下方法：

jslib没有css文件，也没有内联样式。所有样式都是在我在页面中引用的js文件中构建的。

普通的css是否有办法以某种方式覆盖边框样式？如果没有，jquery必须有一些方法。但是，如果我用jquery尝试它，我不知道如何挂钩到jslib。或者，如果我尝试挂钩链接点击触发所有内容，jquery可能会尝试在创建iframe之前应用样式等。不确定挂钩的位置，挂钩的方式以及对象创建的时间。

这样做的最佳方法是什么？普通的旧CSS会很棒，但是如果不可能的话，欢迎使用jquery样式。

Answer 1

我会选择更好的指定选择器，如：

body #PPDGFrame .panel iframe {
   /* Your style here */
   border: 2px solid #666;
}

我宁愿避免使用重要的，你最终会陷入一个重要的地狱，这是由于selector priorities

那么选择器优先级是什么意思 - 让我们举一个小例子：

<html>
    <body>
        <div id="wrap" class="wrap">
            <div class="element"></div>
        </div>
    </body>
</html>

如果你有上面的HTML，那么你需要选择＆＃34; div.element＆＃34;你可以很简单地做到这一点。

.element { /* some style */ }

paypal是如何做到的，他们注入了一个内联样式表，它有一个比类选择器强的id选择器

#wrap .element { /* some style */ }

所以如何覆盖这个，你简单地做一个更强大的＆＃34;选择

body #wrap .element { /* some style */ }

我更喜欢在我的类上使用bem语法来使用＆＃34;最轻的选择器版本＆＃34;，详细了解BEM语法 here

如果您在加载Iframe中的内容后需要执行操作，则需要检查＆＃34; jslib＆＃34;中的内容。你的使用以及何时返回你的东西

为什么不使用！important

在我看来我首先使用它作为调试工具而不是生产工具，我很少用它来覆盖一些javascript设置样式，当你设置一个可以保存样式的类时我也认为这是错误的

如果最终有5个或10个类似的选择器！important ，它就会开始变得混乱。

Answer 2

试试这个。

border: 2px solid #666 !important;

除了其他!important定义外，重要标志优先于所有其他定义。