CSS 选择器 :target

简介

:target 是一个伪类选择器，用于匹配当前活动的 URL 中特定元素。当用户通过锚点链接访问页面时，该链接指向的元素将会被选中。

基本用法

:target 通常与锚点链接一起使用。当 URL 包含一个 # 后面跟着一个 ID 时，浏览器会滚动到这个 ID 对应的元素上，并且这个元素会被 :target 选择器选中。

示例

假设 HTML 结构如下：

<a href="#section">跳转到章节</a>
<div id="section">
  <h2>章节标题</h2>
  <p>这是章节的内容。</p>
</div>

对应的 CSS 代码可以是：

// www.javascriptcn.com code example
/* 默认样式 */
#section {
  background-color: #f0f0f0;
  padding: 10px;
}

/* 当 #section 被选中时的样式 */
#section:target {
  background-color: #c0c0c0;
  border: 2px solid #000;
}

当用户点击链接并跳转到 #section 时，#section 的背景颜色和边框将会改变。

实际应用案例

:target 选择器在需要根据用户行为动态改变页面部分样式的场景中非常有用。例如，在一个 FAQ 页面中，可以使用 :target 来高亮显示当前查看的问题部分。

示例

HTML 结构：

// www.javascriptcn.com code example
<ul>
  <li><a href="#q1">问题1</a></li>
  <li><a href="#q2">问题2</a></li>
  <li><a href="#q3">问题3</a></li>
</ul>

<div id="q1">
  <h3>问题1</h3>
  <p>答案1...</p>
</div>

<div id="q2">
  <h3>问题2</h3>
  <p>答案2...</p>
</div>

<div id="q3">
  <h3>问题3</h3>
  <p>答案3...</p>
</div>

CSS 样式：

// www.javascriptcn.com code example
div {
  margin-top: 20px;
  padding: 10px;
}

/* 默认样式 */
div {
  background-color: #fff;
  border: 1px solid #ddd;
}

/* 当某个问题被选中时的样式 */
div:target {
  background-color: #e0e0e0;
  border-color: #999;
}

在这个例子中，当用户点击不同的问题链接时，相应的问题部分将会被高亮显示。

注意事项

• :target 选择器只会在用户通过 URL 锚点链接访问页面时生效。
• 如果页面加载后没有锚点链接，则 :target 选择器不会匹配任何元素。
• 使用 :target 选择器时，请确保相关的元素具有唯一的 ID。

总结

:target 选择器是一个非常有用的工具，能够帮助前端开发者根据用户的导航行为动态地改变页面元素的样式。这使得网页更加互动和响应用户需求。