Переопределение! Важное свойство, используемое в таблице стилей виджета в нижнем колонтитуле

Question

У меня есть твиттер-виджет, который загружается в нижний колонтитул моей страницы.Проблема в том, что он использует! Важные свойства повсюду.И поскольку все мои таблицы стилей загружены в заголовок, таблицы стилей виджета автоматически переопределяют любой из моих.

Нужно ли мне помещать несколько отдельных стилей в нижний колонтитул моего документа под виджетом, чтобыполучить силу этого.Или есть более семантический метод?

Answer 1

Я бы посмотрел, есть ли способ сделать ваш CSS более специфичным , чем селекторы, используемые в твиттере. Правила специфичности гарантируют, что ваши стили !important переопределят стили twitter !important.

В противном случае, в качестве крайней меры, и если !important используется только для классов в CSS Twitter, то вы можете назначить id для всего, что переопределено, чтобы обеспечить более конкретный выбор ваших селекторов.

/* your style */
#anti_twitter a.link {
    color: blue !important;
}

/* twitter style */
a.link {
    color: red !important;
}

Таким образом, используя приведенный выше код, ссылки будут выделены синим цветом.

JSFiddle: http://jsfiddle.net/9T9uk/

Answer 2

<div id="myWrapper">
     <div id="theDefaultId">
       ....
     </div>
</div>

и вы можете использовать #myWrapper #theDefaultId { anything: value !important; }

theDefaultId - это идентификатор, который использует виджет Twitter, а #myWrapper - это определенный нами идентификатор.

Это должно работать.