如何将CSS3放在：target上

响应用户操作而更改样式的CSS伪类已经存在了很多年。 您几乎可以肯定使用过：hover，：active和：focus;。 我可以（仅）记得在1997年更改IE4链接颜色的激动。

CSS3还引入了：target; 一个强大的伪类，可以减少交互式小部件中脚本编写的需要。 考虑页面URL，例如http://mysite.com/page #mytarget ; ID为“ mytarget”的元素可以应用匹配的：target样式。

：target浏览器支持

所有现代的浏览器都支持：target，您将不会遇到IE9或大多数版本的Chrome，Firefox，Safari和Opera的问题。 不幸的是，这仍然使我们只能使用旧版本的IE。 我不会为IE6和7担心太多，但IE8仍然是世界上使用最多的浏览器版本 。 但是，一切都不会丢失，因为selectivizr之类的垫片可以添加：target支持，而无需复杂的解决方法。

一个简单的文档：目标

我们最近一直在讨论网站合同 。 可以在一个或多个网页中包含诸如付款时间表，托管条件，取消条款，支持政策，词汇表等的通用合同小字。 即使您尝试保持简洁，文档也可能会变得相当长！

让我们在contract.html中查看文档的HTML5片段：

<h1>Website Contract</h1>

<nav>
	<ul>
		<li><a href="#payment">Payment Schedule</a></li>
		<li><a href="#support">Support &amp; Maintenance</a></li>
		<li><a href="#hosting">Hosting Terms</a></li>
		<li><a href="#glossary">Glossary</a></li>
	</ul>
</nav>

<article id="payment">
<h2>Payment Schedule</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>

<article id="support">
<h2>Support &amp; Maintenance</h2>
<p>Ut euismod tempor porttitor.</p>
</article>

<article id="hosting">
<h2>Hosting Terms</h2>
<p>Suspendisse ac nisl lorem, ut fermentum erat.</p>
</article>

<article id="glossary">
<h2>Glossary</h2>
<p>Aenean id nibh eget nisl blandit hendrerit lobortis ac tortor.</p>
</article>

我们可以使用：target属性突出显示活动部分，例如

article:target
{
	background-color: #ffc;
	border: 2px solid #fcc;
}

查看合同的任何人都可以单击导航菜单项以突出显示适当的部分。 您还可以向需要特定信息的客户发出直接链接，例如contract.html＃support 。

：target选择器提供了更多的通用性-无需使用JavaScript即可在HTML5和CSS中创建动态效果。 有关SitePoint的更多文章即将发布…

From: https://www.sitepoint.com/css3-target-selector/