2013-02-19 2 views
0

Я использую плагины NextGEN для Wordpress 'и' JJ NextGen JQuery Carousel ', потому что я пытаюсь сделать карусель, который выглядит так же, как и внешний вид последнего именованного плагина. Проблема заключается в том, что плагин использует DIV с фоновым изображением в виде кнопки, и он получает этот CSS:Overrule! Important inline CSS

div#about-jcarousel_container .jcarousel-skin-custom .jcarousel-prev-horizontal { 
    top: 188px !important; 
} 

Из-за этого, это не работает (верхняя: 0px часть):

.jcarousel-skin-custom .jcarousel-prev-horizontal { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 32px; 
    height: 32px; 
    cursor: pointer; 
    background: rgba(24, 16, 16, 0.43) url(prev-horizontal.png) no-repeat 0 0; 
    background-position-y: 50%; 
    height: 100%; 
} 

Где неприятно то, что 188px нигде не звонит, поэтому я не могу просто отредактировать его, чтобы сделать его 0px, но клиентскую сторону в браузере. Таким образом, я огляделся, и кажется, что плагин помещает код 188px в встроенные теги стиля <. Потому что он имеет важное значение, я не могу просто использовать! В моем шаблоне.css важно перезаписать его.

Это другой способ отменить важные теги, которые используются inline? Я действительно хочу, чтобы плагин обновлялся.

+0

AFAIK, вы можете использовать '! Important' снова для своих стилей. –

+0

Вы сказали, что у него встроенный стиль, но вы разместили правило CSS. Вы уверены в первом? – Pavlo

+0

@Mr_Green Я пытался, когда я это делаю, он отменяется тегами стиля, потому что это тоже важно. – Gideon

ответ

2

Единственный способ переопределить !important - это снова использовать !important в каскаде, поэтому поместите его в файл CSS после jcarousel.

В качестве альтернативы, редактировать jcarousel

+0

Это действительно помогло мне, я попытался вызвать файл CSS перед плагином, потому что он был бы первым! Важно, но, видимо, это наоборот. Я назвал свой файл CSS после плагина, и он сработал! Mr_Green имел тот же ответ, но этот был первым, так что .. да. – Gideon

0

Вот почему использование !important не рекомендуется. Вы можете только переопределить !important другим !important, и это не всегда возможно. Когда есть два правила с !important, тогда применяется «самый важный».

И теперь вопрос, какой из них более важен?

  1. встроенные стили являются более важными (например, <div class="someclass" style="inline style"></div>), чем обычные стили
  2. более конкретные правила> менее специфические (#ONE .example тег .yeah> .yeah)
  3. если два правила имеют одинаковый приоритет, последний нанесенный выигрыш

Если вы не можете добавить более важное правило, вы не можете переопределить !important. Но вы можете использовать скрипт для добавления встроенных стилей при загрузке страницы. Пример (с JQuery):

<script> 
$(document).ready(function() { 
    $("#test").css("color","blue"); 
}); 
</script> 

Пример без JQuery:

<script> 
window.onload = function() { 
    document.getElementById("test").style.color = "yellow"; 
} 
</script> 
+0

AFAIK в < style > теги являются наиболее важными из всех CSS, но только переписывание его с помощью! Важно, но плохо то, что плагин использует оба из них. – Gideon

+0

вы можете использовать скрипт для изменения встроенных стилей после применения всех стилей. Это не очень изящно, но если вы не можете сделать ничего лучше, по крайней мере, это решение. – TheBronx

+0

Как мне это сделать? Кажется удобным для будущего. После тестирования, импорт для встроенного или из включенного файла, те же самые, только последний является самым важным. – Gideon

1

кажется, что вы имеете в виду файл CSS jcarousel после файла .css в ваш HTML-файл. Сохраните ссылку файла jcarousel .css перед вашей таблицей стилей (файл .css). Затем вы можете снова использовать !important, чтобы переопределить свойство стиля jcarousel по умолчанию .css.

Смежные вопросы