Таблица стилей противоречит стилю jquery ui

Question

У меня есть следующий стиль, который работает так, как я хочу, чтобы он работал:

.container { font-family:arial; text-decoration:none; font-size:12px; }

.title {color:#707070; text-decoration:none; }
.username {color:#8DAAB8;}
.dateandtime {color:#A5A7AC;}

.container:hover .title { color: #000000; }
.container:hover .username { color: #DF821B; }
.container:hover .dateandtime { color: #3185B6; }

Но по какой-то причине, когда я добавляю следующий стиль на свою страницу (который мне нужен):

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

Класс .title в исходном стиле, описанном выше, перестает работать, и по какой-то причине остается #000000. Он должен быть #707070 в нормальном состоянии и #000000 при наведении.

Почему это происходит, когда я добавляю внешнюю таблицу стилей и как я могу предотвратить это, не удаляя внешнюю таблицу стилей?

Как только я удаляю внешнюю таблицу стилей, класс .title снова начинает работать идеально, но остальная часть страницы, jquery-ui-tabs, jquery-ui-sortables перестает работать правильно.

Answer 1

Хорошо, я вижу.Ваша внешняя таблица стилей не имеет правила стиля для .title, поэтому некоторая комбинация перезаписывает ваш стиль.Чтобы убедиться, что ваш стиль имеет приоритет, попробуйте сделать ваше правило более конкретным.Если у вас есть другие элементы, которые всегда обертывают ваши элементы .title, добавьте их в правило следующим образом: #container .something .title, чтобы получить более конкретное правило.