Переопределение стилей CSS может быть сделано многими способами, вот краткое объяснение специфичности из MDN:
https://developer.mozilla.org/en/CSS/specificity
Специфичность - это средство, с помощью которого браузер решает, какое из соответствующих правил CSS для данного свойства является наиболее релевантным.
Вообще говоря, правила выбираются в следующем порядке:
- правила помечены! Важно
- те, которые прикреплены к самому элементу (т.е.
)
- правила с большим количеством идентификаторов в селекторе (например, "#foo #bar" бьет "#baz")
- правил с большим количеством классов (например, ".x .y .z" бьет ".a .b", но они оба разбиты "#a" из предыдущего правила)
- правил с большим количеством тегов (например, "body div span" бьет "p strong")
- правила, которые не применяются к рассматриваемому элементу, но находятся дальше по цепочке его наследования
И я мог бы также добавить, что последующее вхождение правила переопределяет первое, поэтому полезно включать собственный CSS после ваших библиотек, внешних ресурсов и т. Д.
.rule { color: red; }
.rule { color: blue; }
Теперь вам просто нужно изучить элемент, чтобы выяснить, какие правила применимы к нему. Chrome Inspect Element или Firebug в Firefox имеют панели, которые показывают CSS, унаследованный элементом.
В этом случае я вижу, что синий цвет исходит непосредственно из класса .liketext. Так что переопределите это так, как можете. Самый простой - переопределить класс .liketext, чтобы переопределить только это одно свойство с помощью! Important.
.liketext { color: white !important; }
Если это не сработает сразу, начните применять правила специфичности:
.connect_widget_like_button .liketext { ... }
.connect_widget_like_button span.liketext { ... }