Как изменить CSS дочернего элемента a-элемента

Question

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

HTML-структура:

<ul class="calendar-content">
 <li>
   <a href="#day02" onClick="popup('02');">
     <span class="day"><strong>02</strong></span>
     <span class="content" id="content">
       <small>02</small>
       <strong>Inhalt Tag 01</strong>
     </span>
    </a>
 </li>

Пользователь видит только первый промежуток (класс = день).После клика по ссылке должен появиться второй промежуток (class = content).Моя первая идея была:

  .calender-content .a:visited .content{
  display:block;
  }

Или вот эта:

  //.calender .content got margin-left:120px and is out of view
  .calender-content .a:visited .content{
  margin-left:0px;
  }

Но ничего не происходит.Может быть, это не правильно, но я видел такие вещи раньше.Я просто хочу отобразить второй промежуток после посещения ссылки.Либо установив стиль отображения для блокировки, либо изменив поле на 0, и анимируем его с помощью -transition.Но ничего, стили не отображаются в элементе span.

Если в CSS есть обходной путь, это было бы здорово.Так что мне не нужно использовать JS.

Cheers Dan

Answer 1

Должно быть:

.calendar-content a:visited .content { display: block; }

У вас есть ".a", что означает "элементы с классом 'a'", а не "элементы с именем тега 'a'": -)

Теперь дело в том, что я не уверен, что ":ited" будет "истинным" (или каким-либо другим подходящим термином), если ваш тег <a> на самом деле не является чем-то, что "посещает" другой URL. Если это так, то ваш обработчик событий может добавить класс к привязке. Если ваш обработчик событий позволяет якору перемещаться на метку, то я думаю, что он должен работать.

Answer 2

Ваша первая проблема - это запись ., которая означает «класс», а не «тег».Подробности см. В ответе @ Pointy.

Но тогда вам не следует полагаться на :visited.Действительно, его можно использовать для отслеживания истории, и браузеры, вероятно, в конечном итоге уберут поддержку большинства свойств CSS, которые изменяют макет (например, display), так же как Firefox уже делает .

Чистым решением CSS было бы использование :target псевдокласс .Тем не менее, не поддерживается в IE ≤ 8. Если это является обязательным требованием, вам следует перейти к JS.

В любом случае вы должны изменить свою разметку.Ссылка не должна содержать то, что она переключает.<small> - хороший пример ужасного использования разметки как презентации.Используйте class ed span.