Блог

Главная - Вопросы по программированию - Таблица стилей, конфликтующая со стилем пользовательского интерфейса jquery

Таблица стилей, конфликтующая со стилем пользовательского интерфейса jquery

#jquery #css #jquery-ui #jquery-ui-css-framework

#jquery #css #jquery-пользовательский интерфейс #jquery-ui-css-framework

Вопрос:

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

 .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 перестает работать должным образом.

Комментарии:

1. вам нужно опубликовать свой HTML-код, чтобы получить ответ. лучше всего было бы создать jsfiddle. подключитесь , чтобы другие могли увидеть и проанализировать проблему.

2. Я бы с удовольствием это сделал, но html управляется сервером / базой данных.

3. Вы не можете просто скопировать исходный код одной страницы-примера? По-видимому, какой-то стиль во внешнем css перезаписывает ваш, просмотр полного html amp; css должен упростить исправление

4. @svanelten, я передаю данные json и html-фрагментов обратно в javascript, который, в свою очередь, создает html на странице. Таким образом, сгенерированный html не виден из view source.

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

Ответ №1:

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