Таблица стилей противоречит стилю 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 чтобы получить более конкретное правило.