啊·

2016-01-15 本文已影响82人洗阳光

写在前面的话：无意在逛Quora的时候看到这个问题:
<a href="https://www.quora.com/HTML-and-CSS-How-can-I-use-the-target-pseudo-selector-to-change-the-color-and-shape-of-the-dot-in-this-image">HTML and CSS: How can I use the :target pseudo selector to change the color and shape of the dot in this image?</a>
然后给出了一个很神奇的效果，通过伪元素以及URL的hash达到按钮和其他元素动画效果相关联的效果，然后搜了一下伪元素

原文链接：<a href="https://css-tricks.com/on-target/">The :target</a>

当URL的hash和元素的id一样时会触发CSS伪元素

hash

当前URL的hash是"voters"

<section id="voters"> Content</section>

:target { background: yellow;}

当URL和上图所示一样时，section元素将会有一个CSS样式同样的黄色的背景。

你什么时候会需要这个属性？

当你想要拥有“状态”的样式你可能会需要。当网页有一个确定的hash，这就是“状态”。虽然它并没有像使用class类名操作属性那么多能（因为只能一个元素只能对应一个唯一的元素），但这是相似的。只要你可以通过类名改变状态的你都可以用元素加:target。例如：改变颜色，位置，图像，隐藏显示等等。

遇到下面的情况时我会优先考虑:target

需要一个”状态“
可接受跳转行为
可接受对浏览器历史的影响

在这篇文章中我们比较全面的了解这些东西

你怎么从URL得到hashes？

最常见的做法是点击一个包含hash的链接，可以是一个内部链接（同一个页面）或者是一个全链接，例如

<a href="#voters">Go To There</a>
<a href="http://example.com/#specific-part">Go To There</a>

跳转行为

不管是不是在同一个页面，直到元素出现在页面顶部前，浏览器的行为都是滚动的页面，或者说尽他所能的滚动。知道这一点很重要，因为这意味着利用这一“状态”是有其局限性的。

例如，曾经我尝试过几种技术去复制最基本的CSS tabs，但最终还是决定用 checkbox hack 因为它有效避免了页面的跳转。Lan Hanssson在CSS Sicence也有一些tabsexamples of tabs的例子，它第三个例子就是用了:target，当然可以用已定位元素藏在页面的顶部防止页面内跳转的行为，这是聪明的，但并不是最终的解决办法，因为这会导致页面会向上跳转而tabs本应顺着页面向下延伸而锚点则是固定定位，意味着即使滚动页面也不会跳转到顶部，精妙！

绝佳应用：高亮部分

这里有一个问题：当你通过hash链接来到相关的部分时，它会紧紧的贴在浏览器顶部。
但是假如如果没有足够的空间去滚动到相应的部分呢？这一部分就是可见的，但是它不会紧贴在顶部，看起来十分怪异和困惑。

scrolling-problem

它看起来很混乱的

我并不是编造的，根据我以往的经历，页面跳转链接并不会真到达链接所到的地方而只是页面的顶部，这太让人不爽了。我发现这个经常发生在类似链接部分在不太高的地方的FAQ页面。

着手开始解决！

以前有个办法，叫做 Yellow Fade Technique.它是由37signals用来解决页面添加新内容的方法的，试图获取用户的注意。Jonathan Snook则结合了:target ported that idea to CSS

抛开yellow fade，我们将会找到我们刚刚点击的链接的部分会被闪烁的红色边界轻轻的推开。不用想了，我们开始了：

https://youtu.be/vqE1MZ0UlaM

类似ID链接部分的导航结构：

<nav> 
  <a href="#one">1</a> 
  <a href="#two">2</a> 
  <a href="#three">3</a>
</nav>
<section>
 <div id="one">
  <h2>One</h2>
  Pellentesque habitant morbi ...
</div> 
<div id="two">
  <h2>Two</h2>
  Pellentesque habitant morbi ...
</div> 
<div id="three">
  <h2>Three</h2>
  Pellentesque habitant morbi ...
  </div>
</section>

当部分段落变成:target，会通过translateX向旁边挪一点（防止造成其文字环绕或者和内边距padding有关的其他现象），并且红边通过动画的keyframe效果闪烁。

:target { animation: highlight 1s ease; 
transform: translateX(20px); }
@keyframes highlight { 
0% { border-left-color: red; } 
100% { border-left-color: white; }
}
section > div { 
border-left: 40px solid white; 
padding: 10px; transition: all 0.5s ease; 
padding-right: 50px; margin-left: -20px; 
}

这就是它所有的用法，我会在渐进增强的原则下使用它，如果担心浏览器的支持，这只是个好玩的尝试，并非是关键。
View Demo

解决页面跳转！

如果你喜欢使用:target改变状态而不是上下跳转，你可以在页面不跳转的情况下改变URL的hash。通过使用jQuery，你可以改变hash的链接，阻止它的默认行为，并且用push状态或者replace状态改变URL（这样做并不会导致页面跳转）

$("a[href^=#]")
  .on("click", function(e) { 
  e.preventDefault(); 
  history.pushState({}, 
  "", this.href);
  }
);

你也可以通过只使用replace状态达到，这样的话URL在改变的同时并不会添加历史记录到浏览器上。有时候你也许会需要，有时候就不需要了。至少你有个在点击hash链接时阻止浏览器添加历史记录的选择。

然而总有不好的

当URL改变产生新的hash时，你会认为当前的target会导致新的CSS生效。这在当前写这篇文章时的WebKit和Firefox，这有一个bug It's a bug.
理论上来讲，你可以测量并保存当前滚轮的位置让链接自然的移动，然后让它再回到原来的地方。但是这太恶心了，以致于我从未想过用于测试页面。

The spec in Selectors Level 4 (no significant new stuff from what is above)
A simple image gallery using :target (suffers from the page jump thing, good example of that) by Chris Heilmann
Demo of yellow fade technique (although for existing content, not newly-added content) from Web Designer Notebook.
A CSS Target, literally, by Caleb Ogden.

啊·