CSS3 :target 伪类

最新推荐文章于 2024-08-18 23:12:09 发布

ximengyun

最新推荐文章于 2024-08-18 23:12:09 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML/CSS 文章标签： target 伪类 CSS3

本文链接：https://blog.youkuaiyun.com/cookfront/article/details/8896397

HTML/CSS 专栏收录该内容

15 篇文章

订阅专栏

本文介绍CSS3中的:target伪类及其用法，通过实例展示了如何使用:target来为链接的目标元素定义样式，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一些URL拥有片段标识符，它由一个#后跟一个锚点或元素ID组合而成，可以链接到页面的某个特定元素，比如#respond。:target伪类选取链接的目标元素，然后供你定义样式。

浏览器支持

因为我们在讨论CSS3，所以它现在被除了IE6-8以外的所有浏览器支持，但是IE9会支持这个伪类。这是相当遗憾的，但是这个现实并不影响你使用它。

如何使用:target

HTML:

<ul id="toc">
    	<li><a href="#derbyshire">Derbyshire</a></li>
    	<li><a href="#cotswolds">Cotswolds</a></li>
        <li><a href="#daytrips">Day Trips from the Cotswolds</a></li>
        <li><a href="#winchester">Winchester and Surrounding Area</a></li>
        <li><a href="#london">London</a></li>
</ul>
<h2 id="derbyshire">Derbyshire</h2>
<h2 id="cotswolds">Cotswolds</h2>
<h2 id="daytrips">Day-trips from the Cotswolds</h2>
<h2 id="winchester">Winchester and Surrounding Area</h2>
<h2 id="london">London</h2>

CSS:

h2:target {
	background-color: hsla(203, 78%, 36%, .2);
}