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）。点击链接后点击第二个跨度（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并使用其设置动画 -过渡。但是没有任何样式不会出现在span元素上。

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

干杯丹

Answer 1

应该是：

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

你有“.a”，意思是“带有'a'”类的元素，而不是“带有标记名'a'”的元素： - ）

现在问题是，如果你的<a>标签不是“访问”另一个标签，我不确定“：visited”是否为“true”（或任何适当的术语） URL。如果是这种情况，那么您的事件处理程序可以向锚添加一个类。如果您的事件处理程序确实允许锚移动到标签，那么我认为它应该可行。

Answer 2

您的第一个问题是.符号表示“类”而不是“标记”。有关详细信息和修复，请参阅@ Pointy的答案。

但是，你不应该依赖:visited。实际上，它可以用于历史嗅探，浏览器可能最终会删除对大多数改变布局的CSS属性的支持（例如display），就像Firefox already does一样。

纯CSS解决方案是使用:target pseudo-class。但是，在IE≤8中它是not supported。如果需要，你应该去JS。

您选择的任何方式都应该重构您的标记。链接不应包含切换的内容。 <small>是一个糟糕的标记 - 演示文稿使用的好例子。使用class ed span。

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

2 个答案: