Как заставить 2 CSS-файла работать вместе? - Проблема с! Важными главными правилами

Question

У меня проблема с тем, что наш CSS-файл плохо воспроизводится с CSS в оболочке, в которую мы внедряем наш контент. У меня есть некоторые правила, указанные в нашем файле CSS с! Важными объявлениями, потому что CSS-оболочка заставляет браузер игнорировать мои правила. К сожалению, это переопределяет стили в обёртке, и я не хочу, чтобы это делалось. Вы можете увидеть пример этого здесь:

http://fundcentre.newireland.ie/Results.aspx (наш контент - «ПОИСК ФОНДА» и ниже)

В некоторых моих правилах CSS объявление! Важные заставляет ссылки на панели навигации слева изменять размер при наведении на них курсора мыши. Однако, если я удалю! Важные объявления, ссылки в таблице и в буфере обмена начнут работать неправильно, так как они начнут менять размер при наведении курсора. (чтобы увидеть буфер обмена в действии, отметьте несколько полей в таблице и нажмите «Проверить свой выбор»)

Я знаю, что наш CSS не самый лучший, но кто-то может подсказать, как мне заставить их работать вместе? Спасибо.

Я также пытался поставить перед всеми своими правилами префикс «.content», потому что весь наш контент существует внутри div с классом «content», но это никак не отразилось.

Answer 1

В NewIreland.css, строка 316, вы определяете:

.displaycontent a:link, a:hover, a:visited, a:active {
    /*...*/
    font-size:11px !important;
    /*...*/
}

... который задает стиль для ссылок внутри .displayContent, любой ссылки, на которую ссылаются, любой посещенной ссылки и любой активной ссылки.

Кажется, вы имеете в виду:

.displaycontent a:link, .displaycontent a:hover, .displaycontent a:visited, .displaycontent a:active {
    /*...*/
    font-size:11px !important;
    /*...*/
}

Или в лучшем формате:

.displaycontent a:link,
.displaycontent a:hover,
.displaycontent a:visited,
.displaycontent a:active {
    /*...*/
    font-size:11px !important;
    /*...*/
}

Answer 2

<link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" />

если две таблицы стилей имеют одно и то же объявление элемента, оно будет взято из того, которое включает позже.

т.е. если в stylesheet.css

a{
  color:red;
}

и в lightbox_new.css

a{
  color:blue;
}

Тогда в следующем коде цвет ссылки «Check Color» будет синим.

<link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" />
<a href="http://www.google.co.in">Check Color</a>