Question

我正在使用Firefox 52.9.0。

我正在尝试向页面添加skip navigation link。当前，页面如下所示：

/* Accessibility */
  /* Hide the skip to main content link unless it has focus */
body > a:first-child {
  background: inherit;
  position: fixed;
  left: 0px;
  top: -1em;
  transition: top 2s ease-out;
}
body > a::first-child:not(:focus) {
}
body > a:first-child:focus {
  top: 0px;
  transition: top 0.1s ease-in;
}

<a href="#lorem">skip to main content</a>
<main id="lorem">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum... can't remember the rest, sorry.</p>
  <p>This CSS is mostly fine.</p>
</main>

（单击页面上的，然后按 Tab 以查看效果。）

这看起来不错，除了可以看到下划线和下划线。为了解决这个问题，我告诉浏览器在没有焦点时将文本颜色更改为transparent：

/* Accessibility */
  /* Hide the skip to main content link unless it has focus */
body > a:first-child {
  background: inherit;
  position: fixed;
  left: 0px;
  top: -1em;
  transition: top 2s ease-out;
  transition: color 2s ease-out;
}
body > a:first-child:not(:focus) {
  color: darkgoldenrod;
}
body > a:first-child:focus {
  top: 0px;
  transition: top 0.1s ease-in;
  transition: color 0.1s linear;
}

<a href="#lorem">skip to main content</a>
<main id="lorem">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum... can't remember the rest, sorry.</p>
  <p>This CSS behaves strangely.</p>
</main>

（{transparent代替了darkgoldenrod，因此更容易看到效果。）

color过渡有效，但是由于某些原因，它停止了top过渡的正常工作！

这是为什么，我该如何解决？

Answer 1

您的第二个transition声明擦除而不是添加第一个声明。这是工作的级联。

您不能使用多个transition声明来附加声明单独的过渡；您将需要将它们分组为单个声明，如下所示：

body > a:first-child:focus {
  top: 0px;
  transition: top 0.1s ease-in, color 0.1s linear;
}

颜色过渡影响顶部‽

1 个答案: