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

Question

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

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

Answer 1

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

В противном случае, в крайнем случае, и если !important используется только в классах в Twitter CSS, тогда вы можете назначить 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 это идентификатор, определенный нами.

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