在CSS中,:target
是一个伪类选择器,它用于选择当前活动的目标元素。这通常与URL中的片段标识符(也称为“锚点”)一起使用,以突出显示或更改页面上特定元素的样式。
当用户点击一个链接,该链接的 href
属性指向页面内的某个特定元素(通过ID指定)时,该元素就会成为“目标”元素。此时,你可以使用 :target
选择器来为这个元素应用特定的样式。
例如,假设你有以下HTML结构:
<a href="#section1">Go to Section 1</a>
<a href="#section2">Go to Section 2</a>
<div id="section1">
This is Section 1.
</div>
<div id="section2">
This is Section 2.
</div>
和以下CSS样式:
:target {
background-color: yellow;
}
当用户点击“Go to Section 1”链接时,页面会滚动到ID为section1
的<div>
元素,并且该元素的背景色会变为黄色。同样,当用户点击“Go to Section 2”链接时,页面会滚动到ID为section2
的<div>
元素,并且该元素的背景色也会变为黄色。
这种技术可以用于创建单页面导航效果,其中页面内的不同部分可以根据用户的交互进行高亮显示或样式更改。
标签:target,Section,元素,Go,选择器,css,页面 From: https://www.cnblogs.com/ai888/p/18634617