Наследование / перегрузка стилей CSS - PullRequest
2 голосов
/ 22 октября 2010

У меня есть веб-страница, на которой в определенный момент отображается панель навигации, представляющая собой не более чем список ( ul ) a элементов.Большинство правил стиля для указанных элементов a являются общими.Единственная часть, которая должна измениться, - это изображение, которое нужно показать, что можно угадать из тега id каждого li элемента списка.

Итак, вот вопрос:

Есть ли в CSS способ определить что-то вроде "базового" стиля для всех элементов a и затем установить изображение в зависимости от идентификатора?Возможно, нет ( Наследование элементов управления CSS - Наследование других стилей управления ), но хотелось бы быть уверенным.

Я пытался:

#nav li a {
    /*This would be the 'base' For all the "a"s inside a 
      list inside an element with id=nav (nav -> navigation)*/
 background-color: transparent;
 background-repeat: no-repeat;
 background-position: 0 -58px;
 border-left: thin #444444 solid;
}


#nav li#settings a {
 background: url(../images/nav_settings.png);
}

#nav li#media a {
 background: url(../images/nav_media.png);
}

#nav li#user a {
 background: url(../images/nav_admin.png);
}

Но это непохоже на работу ... "базовый" стиль перезаписан ...

Заранее спасибо!

Ответы [ 2 ]

7 голосов
/ 22 октября 2010

В вашей конкретной ситуации используйте CSS-директиву background-image.Когда вы используете фон, вы сбрасываете все ранее установленные свойства background- *.

Как это - Пример:

#nav li#settings a {
 background-image: url(../images/nav_settings.png);
}

#nav li#media a {
 background-image: url(../images/nav_media.png);
}

#nav li#user a {
 background-image: url(../images/nav_admin.png);
}
1 голос
/ 22 октября 2010

Вы можете установить базовое значение или значение по умолчанию для любого тега. В вашем случае вы должны использовать идентификаторы на якорях вместо родительских тегов:

пользователь # и т. Д.

И, как сказал Джон, используйте background-image вместо фона для якорей, потому что установка background устанавливает все свойства фона (background-repeat, background-color и т.д.).

...