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

【问题标题】：How do I change the CSS of child of an a-element如何更改 a 元素的子元素的 CSS
【发布时间】：2011-11-15 13:02:43
【问题描述】：

我对自己的工作感到有些困惑。我的问题是，我想更改一个被元素覆盖的元素。

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=天）。点击链接后第二个 span(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了。

干杯丹

【问题讨论】：

标签： javascript html css

【解决方案1】：

应该是：

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

你有“.a”，意思是“类为'a'的元素”，而不是“标签名为'a'的元素”:-)

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

【讨论】：

我不知道为什么，但:visited 有效，但规则仍不适用于其子元素。见jsFiddle。
当我测试它时，它确实将 display:block 添加到子元素中，你能更清楚哪些“规则”不适用吗？
:visited 不是指“访问另一个 URL 的东西”，而是"something that's been visited"，即您的浏览器已经到达目的地。这可以用于历史嗅探，因此对于 Firefox 中的大多数属性来说是blocked。这可能是@bazmegakapa 评论的原因。
是的；对不起，我不清楚。我知道这意味着什么。我试图表达的是，我不确定如果事件处理程序（我们看不到）阻止“单击”的默认操作会发生什么。如果是这样，":visited" 会被激活吗？如果标签 ("#day02") 已滚动到另一个类似的 <a> 或到达该标签怎么办？如果需要更多的特异性，从处理程序中添加一个类可能是正确的方法。
我不确定:visited 对内部链接的表现如何。无论如何，正如我在评论中所说，你不应该依赖它。我添加了一个不同的答案，它为 :target 伪类提供了另一种解决方案。

【解决方案2】：

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

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

纯 CSS 解决方案是使用 :target pseudo-class。不过IE ≤ 8 是not supported，如果是需求，还是去JS吧。

无论您选择何种方式，都应该重构您的标记。该链接不应包含它切换的内容。 <small> 是一个糟糕的标记作为演示使用的好例子。使用classed 跨度。

【讨论】：