#书摘 #css #前端
《CSS 选择器世界》 :target 伪类与锚点
假设浏览器地址栏中的地址如下：
https://www.cssworld.cn/#cs-anchor
则 #cs-anchor 就是“锚点”，对应术语是哈希，即JavaScript中location.hash的返回值。

URL锚点可以和页面中id匹配的元素进行锚定，浏览器的默认行为是触发滚动定位，同时进行:target伪类匹配。

举个例子，假设页面有如下HTML代码：

<ul> 
   <li id="cs-first">第1行，id是cs-first</li> 
   <li id="cs-anchor">第2行，id是cs-anchor</li> 
   <li id="cs-last">第3行，id是cs-last</li> 
</ul>


以及如下CSS代码：

li:target { 
   font-weight: bold; 
   color: skyblue; 
}


则第二行列表的颜色为天蓝色，同时文字加粗显示。
这就是:target伪类的作用——匹配URL锚点对应的元素。

https://memo.cosine.ren/m/399
 
 
Back to Top