我在网页中使用了第三方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的类似选择器,则开始变得令人困惑。