本文介绍了一种特殊的CSS选择器——target选择器及其应用案例。通过具体示例展示了如何利用target选择器来实现页面元素的状态变化，同时介绍了:root和::selection等其他结构性伪类选择器的基本用法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—target</title>
<style type="text/css">
:root{background:orange;}/*根选择器，顾名思义相当于html，但是使用该选择器对hack很方便*/
::selection{background:red;color:#fff;}/*用于鼠标选定字改变其背景或其他属性*/
#brand:target p{background-color:blue;color:#fff;}
#apple:target p{background-color:blue;color:#fff;｝
</style>
</head>
<body>
<div class="menuSection" id="brand">
<h2><a href="#brand">Brand</a></h2>
<p>content for Brand</p>
</div>
<div id="apple">
<h2><a href="#apple">apple</a></h2>
<p>content for apple</p>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—target</title>
<style type="text/css">
:root{background:orange;}/*根选择器，顾名思义相当于html，但是使用该选择器对hack很方便*/
::selection{background:red;color:#fff;}/*用于鼠标选定字改变其背景或其他属性*/
#brand:target p{background-color:blue;color:#fff;}
#apple:target p{background-color:blue;color:#fff;｝
</style>
</head>
<body>
<div class="menuSection" id="brand">
<h2><a href="#brand">Brand</a></h2>
<p>content for Brand</p>
</div>
<div id="apple">
<h2><a href="#apple">apple</a></h2>
<p>content for apple</p>
</div>
</body>
</html>
扫一扫
17
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
