如何设置类元素的样式

how to style class element?

本文关键字：元素 样式 设置 何设置      更新时间：2023-09-26

我的网站上有一个js库，它正在为我创建弹出窗口。

我试着设计弹出窗口的样式，但什么都不起作用。

html输出是

<div class="lpopup zoom" style="opacity: 1; transform: translate(435px, 200px); bottom: -6px; left: -54px;">

我一直在努力改变底部和左侧的位置。

当我用firebug检查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");

和其他变体

没有发生任何事情

我真的很难改变弹出窗口的元素样式。

感谢您的帮助

样式属性中的内容比任何规则集都更具体，因此它在级联中总是排在最后并被应用。

干净的解决方案是：将初始CSS从style属性移到样式表中。然后写下你的规则，同时注意具体性。

破解方案是：使用!important标志

真正令人讨厌的解决方案是：使用JavaScript更改样式属性（这是您正在尝试的，但选择器错误）。

.lpopup zoom将匹配：<anything class="lpopup"><zoom> This element </zoom></anything>

您需要.lpopup.zoom，它将匹配属于这两个类的元素。

您需要.lolup.zoom { css here }。

对不起，我没有像Alien先生那样完全理解这个问题。是的，内联样式将始终覆盖外部样式，所以您要么需要使用！重要的（我会避免），或者如果可能的话删除内联样式。

在自己的页面中使用写作风格是行不通的。。。。

您只需打开弹出的js库，然后更改通过脚本添加的样式。。。

这是在js文件中自定义弹出窗口设计的一种非常简单的方法。。。。

.lpopup｛//css here｝.soom｛//css here｝应该存在于您的css文件中。

相关文章：