CSS правок в Chrome Консоль работает, но не при развертывании на живом сайте?

Question

Я хотел бы добавить некоторые отрицательные поля в этот конкретный раздел, который я вижу в Chrome Консоль ( ссылка на изображение ):

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    -webkit-transition: all cubic-bezier(.795,-.035,0,1) .5s;
    transition: all cubic-bezier(.795,-.035,0,1) .5s;
    margin: 0;
    padding: 0;

Изменение, которое я хочу сделать, заключается в добавить отрицательную маржу. Таким образом, когда я внес изменение в Chrome Console, я вижу желаемый эффект.

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    -webkit-transition: all cubic-bezier(.795,-.035,0,1) .5s;
    transition: all cubic-bezier(.795,-.035,0,1) .5s;
    margin: -50px;
    padding: 0;

Однако, когда я пытаюсь вставить это как CSS на моем веб-сайте, используя код ниже, я делаю не вижу изменений Есть ли причина для этого? Код, который я использовал в моем CSS, выглядит следующим образом:

<style type="text/css">
    .woocommerce div.product div.images .woocommerce-product-gallery__wrapper{
    margin: -50px !important;   
    }
</style>

Answer 1

Использование! Important только переопределит CSS.

Попробуйте JQuery переопределить существующий код:

jQuery(document).ready(function ($)
{
$('.woocommerce div.product div.images .woocommerce-product-gallery__wrapper').css('margin', '-50px');
});