Подсветка ссылки на текущую страницу

Question

У меня возникли проблемы с отображением выбранной ссылки на отображаемой странице. Я использую только HTML5 и CSS. Я обнаружил, что это работает, когда я изменить идентификатор в каждом HTML-документе «currentLink», но только с помощью традиционного класса/идентификатора так:

#y.x { 
    /* will select element of id="y" that also has class="x" */ 
} 

Однако, чтобы сделать весь элемент ссылки кликабельным, Я использовал «nav», который, кажется, несовместим с решением выше.

Это мой индекс страницы HTML:

 <nav> 
      <div id="currentLink" class="buttons"> 
       <a href="index.html">Om oss</a> 
      </div> 
      <div id="buttonVarahundar" class="buttons"> 
       <a href="">Våra hundar</a> 
      </div> 
      <div id="buttonValpar" class="buttons"> 
       <a href="">Valpar</a> 
      </div> 
      <div id="buttonKontakt" class="buttons"> 
       <a href="contact.html">Kontakt</a> 
      </div>   
     </nav> 

И CSS:

nav a { 
    display: block; 
    width: 25%; 
    height: 3em; 
    float: left; 
    padding-top: 8%; 
    padding-right: 0%; 
    padding-bottom: 4%; 
    padding-left: 0%; 
    background-color: #CCFFCC; 
    box-shadow: 0.2em -0.2em 10px #303030;   
    border-radius: 1em 1em 0 0; 
} 

nav a #currentLink .buttons { 
    background-color: #E0FFFF;  
    box-shadow: 0.2em -0.2em 10px #303030, 0 0.2em #FFFFFF; 
} 

Что я делаю замены некоторых цветов и тени, чтобы создать визуальные эффекты, которые я хочу. Вы знаете, как это может работать с первым методом, но не с моим?

Answer 1

заменить

nav a #currentLink .buttons { 

от

nav div#currentLink.buttons a { 

Answer 2

Пространства в селекторе представляют собой различные элементы

"#page1 nav a" будут выбраны все ссылки (а), которые имеют родительский элемент nav, что находятся в элементе с идентификатором page.

Все эти селекторы будут работать для вашего случая:

<style> 
nav div#currentLink.buttons a {...} 
nav #currentLink.button a {...} 
nav #currentLink a {...} 
div#currentLink.button a {...} 
#currentLink.button a {...} 
#currentLink a {...} 

В общем, вы должны использовать ID (#) для элементов, которые являются уникальными на странице, как:
«#logo, #heade, #main-menu, #unicorn» ,
Классы (.) используются для пометок и часто повторяющиеся элементы:
«.button, .title.selected»

держать CSS чистой и читаемый попытаться построить селекторы с «ближайшим элементом„Названный“(с ID) + кратчайшее возможное УНИКАЛЬНОЕ сочетание классов и селекторов элементов "

поэтому в приведенных выше примерах #currentLink a - идеальный селектор для работы.

Answer 3

вы можете добавить класс к ссылке, которая в данный момент выбран:

<nav> 
<div id="currentLink" class="buttons"> 
<a href="index.html" class="active">Om oss</a> 
</div> 
<div id="buttonVarahundar" class="buttons"> 
<a href="">Våra hundar</a> 
</div> 
</nav> 

Так CSS для ссылок будет:

nav a { 
/* your styles */ 
} 

и некоторые CSS для выбранной ссылки, когда каждый указанная ссылка должна быть отображена так же:

nav a.active { 
/* your styles */ 
} 

Когда каждая выбранная ссылка должна отличаться, вы необходимо будет уточнить:

#currentlink a.active { 
/* Styles for #currentlink when it is the selected*/ 
} 
#buttonVarahundar a.active { 
/* Styles for #buttonVarahundar when it is the selected link */ 
}