Почему мой стиль привязки CSS переопределяется? - PullRequest
2 голосов
/ 07 января 2011

Я пытаюсь изменить тему ScrewTurn Wiki .Существует базовая структура страницы, которая описана здесь:

Справочник по темам ScrewTurn Wiki

Есть несколько предопределенных классов для различных типов ссылок,например:

a, a:link, a:active {
    color: #ffffff;
    text-decoration: none;
}
a:hover {
    color: #D9671E;
    text-decoration: underline;
}

a.externallink {
    background-image: url(Images/ExternalLink.gif);
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 14px;
}
a.internallink {
}

/* Link to a .aspx page */
a.systemlink {
}

/* Link to a Wiki page */
a.pagelink {
}

Мне нужно изменить цвет этих ссылок в зависимости от того, в каком контейнере они находятся. Причина в том, что мой заголовок темно-синий, а боковая панель белая.

Я попробовал это:

/* Make header links white because of dark background */
#HeaderDiv a.pagelink, a.systemlink, a.externallink {
    color: white;
}

#SidebarDiv a.pagelink, a.systemlink, a.externallink {
    color: darkblue;
}

Однако цвет #SideBarDiv переопределяет ссылки #HeaderDiv.Контейнер SideBarDiv не является потомком HeaderDiv.

Ссылки в контейнерах просто устанавливают класс в зависимости от того, что они делают, то есть:

<a href=".." class="systemlink">Logon</a>
<a href=".." class="pagelink">Some wiki article</a>

Чего мне не хватаетВот?Имейте в виду, я полный новичок, когда дело доходит до CSS.

1 Ответ

4 голосов
/ 07 января 2011

Вы должны квалифицировать все ваши a селекторы с соответствующими им div ID селекторами:

#HeaderDiv a.pagelink, #HeaderDiv a.systemlink, #HeaderDiv a.externallink {
    color: white;
}

#SidebarDiv a.pagelink, #SidebarDiv a.systemlink, #SidebarDiv a.externallink {
    color: darkblue;
}

В противном случае последние две части второго набора правил заканчиваются переопределением стилей для всех a.systemlink и a.externallink элементов на ваших страницах.

...