CSS 目标伪类
介绍
CSS 目标伪类(:target
)是一种强大的选择器,它允许你根据 URL 的片段标识符(即 URL 中 #
后面的部分)来选择并样式化页面中的特定元素。当用户点击页面内的锚点链接时,目标元素会被选中,并可以应用特定的样式。
什么是片段标识符?
片段标识符是 URL 中 #
后面的部分。例如,在 URL https://example.com/page#section1
中,section1
就是片段标识符。它通常用于指向页面内的特定部分。
基本用法
:target
伪类的基本语法非常简单。你只需要在选择器中添加 :target
,然后定义你希望应用的样式。
:target {
background-color: yellow;
}
在这个例子中,任何被 URL 片段标识符指向的元素都会有一个黄色的背景。
示例
假设你有一个 HTML 页面,其中包含几个带有 id
的标题:
<h2 id="section1">Section 1</h2>
<p>This is the content of section 1.</p>
<h2 id="section2">Section 2</h2>
<p>This is the content of section 2.</p>
<h2 id="section3">Section 3</h2>
<p>This is the content of section 3.</p>
如果你在 CSS 中定义了以下样式:
:target {
background-color: yellow;
}
当用户访问 https://example.com/page#section2
时,<h2 id="section2">Section 2</h2>
这个元素将会有一个黄色的背景。
实际应用场景
1. 高亮当前阅读部分
在长篇文章或文档中,可以使用 :target
来高亮用户当前阅读的部分,以提升阅读体验。
:target {
background-color: #f0f8ff;
border-left: 5px solid #007bff;
padding: 10px;
}
2. 创建简单的单页应用导航
你可以使用 :target
来创建一个简单的单页应用导航系统。通过点击不同的链接,显示或隐藏不同的内容块。
<nav>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
</nav>
<div id="section1">
<h2>Section 1</h2>
<p>This is the content of section 1.</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>This is the content of section 2.</p>
</div>
<div id="section3">
<h2>Section 3</h2>
<p>This is the content of section 3.</p>
</div>
div {
display: none;
}
:target {
display: block;
}
在这个例子中,默认情况下所有的 div
都是隐藏的。当用户点击导航链接时,对应的 div
会显示出来。
注意事项
:target
伪类只能选择当前 URL 片段标识符指向的元素。如果 URL 中没有片段标识符,或者片段标识符没有匹配任何元素,:target
将不会选择任何元素。
你可以结合其他选择器使用 :target
,例如 :target h2
,来更精确地控制样式。
总结
CSS 目标伪类(:target
)是一个非常有用的工具,它允许你根据 URL 的片段标识符来选择并样式化页面中的特定元素。通过合理使用 :target
,你可以提升用户体验,创建更动态的页面效果。
附加资源与练习
- 练习:尝试在你的网页中使用
:target
伪类来高亮当前阅读的部分,或者创建一个简单的单页应用导航系统。 - 进一步阅读:你可以查阅 MDN Web Docs 了解更多关于
:target
的详细信息。
通过不断实践和探索,你将能够更好地掌握 CSS 目标伪类的使用技巧。