javascript - 如何更改 a 元素的子元素的 CSS

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=day)。单击链接后 第二个跨度(类=内容)应该“出现”。 我的第一个想法是:

  .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;
  }

但是什么也没发生。也许它无效，但我以前见过类似的东西。 我只想在访问链接后显示第二个跨度。 将显示样式设置为 block 或将边距更改为 0 并使用动画 -过渡。 但所有样式都不会出现在 span 元素上。

如果 CSS 中有一种解决方法，那就太好了。所以我不必使用 JS。

干杯丹

Answer 1

应该是:

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

你有“.a”，这意味着“类为‘a’的元素”，而不是“标签名为‘a’的元素”:-)

现在的问题是，如果您的 <a> ，我不确定“:visited”是否为“true”(或任何适当的术语)。标签实际上并不是“访问”另一个 URL 的东西。如果是这种情况，那么您的事件处理程序可以将一个类添加到 anchor 。如果您的事件处理程序确实允许 anchor 移动到标签，那么我认为它应该可以工作。