我的网站上有一个js库,正在为我创建弹出窗口。
我正在尝试设置弹出窗口的样式,但没有任何效果。
的HTML输出是
<div class="lpopup zoom" style="opacity: 1; transform: translate(435px, 200px); bottom: -6px; left: -54px;">
我一直试图更改底部和左侧位置。
当我用萤火虫检查时,css是
element.style {
bottom: -6px;
left: -54px;
opacity: 1;
transform: translate(435px, 200px);
}
我已经尝试通过操作CSS
.lpopup, .lpopup zoom, .lpopup.style, lpopup element.style {
bottom: 30px;
}
但是它们都不起作用,我尝试了尽可能多的变体。
我也尝试过js
$(".lpopup zoom").css("bottom", "30px");
和其他变体
没事
我真的很努力,只是尝试更改弹出窗口的元素样式。
谢谢你的帮助
最佳答案
样式属性中的内容比任何规则集都更specific,因此它将始终排在级联的最后并被应用。
干净的解决方案是:将初始CSS移出style属性,然后移入样式表。然后在注意特定性的同时编写您的规则。
hacky解决方案是:使用the !important
flag
真正令人讨厌的解决方案是:使用JavaScript更改样式属性(这是您要尝试的,但是选择器错误)。.lpopup zoom
将匹配:<anything class="lpopup"><zoom> This element </zoom></anything>
您需要.lpopup.zoom
来匹配两个类的成员的元素。
关于javascript - 如何样式类元素?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17678113/