如何样式类元素？

Question

I have a js library on my website which is creating popups for me.

Im trying to style the popups but nothing is working.

the html output is

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

All that I have been trying to is change the bottom and left position.

When I inspect with fire bug the css is

element.style {
  bottom: -6px;
  left: -54px;
  opacity: 1;
  transform: translate(435px, 200px);
}

I have tried manipulating the css by doing

.lpopup, .lpopup zoom, .lpopup.style, lpopup element.style {
   bottom: 30px;
}

But none of them are working, I've tried as many variations as I can think of.

I have also tried with js

$(".lpopup zoom").css("bottom", "30px");

and other variations

nothing happening though

Im really struggling just trying to change the element style of a popup.

Thanks for any help

Answer 1

The content in the style attribute is more specific then any rule-set, so it will always come last in the cascade and be applied.

The clean solution is: Move the initial CSS out of the style attribute and into the stylesheet. Then write your rules while paying attention to specificity.

The hacky solution is: Use the !important flag

The really nasty solution is: Use JavaScript to change the style attribute (which is what you are trying, but you have the selector wrong).

.lpopup zoom will match: <anything class="lpopup"><zoom> This element </zoom></anything>

You want .lpopup.zoom which will match an element that is members of both classes.

Answer 2

You need .lolup.zoom { css here } .

Sorry, I didn't fully comprehend the question like Mr. Alien did. Yes, inline styles will always override external styles, so you either need to use !important (which I'd avoid), or remove the inline style if possible.

Answer 3

writing style in your own page wont works....

You just open your popup js library and change the style which are added throught the script...

It is very easy way to customize your popup design in js file....

Answer 4

.lpopup {// css在这里} .zoom {// css在这里}应该存在于您的CSS文件中。