我在网页中使用了第三方JavaScript库(我将其简称为“ jslib”),当单击某个链接时,该库会动态生成并在页面上显示iframe。我正在尝试覆盖iframe上的某些样式。在某些情况下,我可以做到,但在一种情况下,我做不到。看一看:



请注意,我的border样式(在styles.css第22行下方)被jslib的border样式“ 0”所覆盖。

这是jslib参考:

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


我尝试了以下方法:


如上所见,我将样式放置在css文件中。
我将css文件放在页面中jslib引用的下面,希望覆盖这些样式。
我将样式直接放在html页面的<style></style>块中。


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

普通的CSS是否有办法以某种方式覆盖该边框样式?如果没有,jquery必须有某种方法。但是,如果我尝试使用jQuery,我将不知道如何连接jslib。或者,如果我尝试挂钩触发所有操作的链接单击,则jquery可能会尝试在创建iframe之前应用样式,等等。不确定如何挂钩,如何挂钩以及对象创建的时间。

最好的方法是什么?普通的旧CSS会很棒,但是如果不可能,那么欢迎使用jQuery样式。

最佳答案

我会选择更好的指定选择器,例如:

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,则需要选择“ div.element”,即可非常简单。

.element { /* some style */ }


贝宝如何做到这一点,他们注入了一个内联样式表,该样式表具有一个比类选择器更强大的id选择器

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


因此,如何覆盖它,您只需简单地选择一个“更强”的选择器

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


我更喜欢在类上使用bem语法以使用“选择器的最新版本”,详细了解BEM语法here

如果您需要在Iframe中的内容加载后进行处理,则需要检查“ jslib”中使用的回调,并在返回时进行处理

为什么不使用!重要

我认为我倾向于将其用作调试器工具而不是生产工具,我很少使用它来覆盖某些javascript设置样式,当您可以设置可以容纳该样式的类时,我也认为这是错误的。

如果最后有5个或10个带有!important的类似选择器,则开始变得令人困惑。

10-06 05:05
查看更多