支持通配符SSL证书、多域名证书、IP证书。适配ACME接口, 支持Zerossl、Let's Encrypt和Google等渠道。登录已有账号
2026-05-18 00:15:33 CSS 交互效果 :target伪类 :checked伪类 选项卡高亮
还在为交互效果引入繁琐的JavaScript吗？揭秘纯CSS的魔法，利用:target和:checked伪类轻松实现鼠标点击切换内容，并打造出选中高亮的选项卡。
无需一行JS代码，就能创建流畅且吸引人的用户界面，大幅提升页面加载速度与开发效率。跟随我们的两个实战示例，即刻掌握这些强大的CSS技巧！
使用纯CSS实现两个常见的效果：鼠标点击切换内容以及选项卡选中高亮。
通过:target伪类，可以实现纯CSS的点击切换内容效果。:target伪类用于选择当前URL片段标识符对应的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS鼠标点击切换内容</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
</nav>
<div id="section1" class="content">
<h2>Section 1 Content</h2>
<p>This is the content for section 1.</p>
</div>
<div id="section2" class="content hidden">
<h2>Section 2 Content</h2>
<p>This is the content for section 2.</p>
</div>
<div id="section3" class="content hidden">
<h2>Section 3 Content</h2>
<p>This is the content for section 3.</p>
</div>
</body>
</html>
/* 初始样式 */
body {
font-family: Arial, sans-serif;
}
nav {
margin-bottom: 20px;
}
nav a {
margin-right: 10px;
text-decoration: none;
color: #333;
}
nav a:hover {
text-decoration: underline;
}
.content {
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 10px;
}
/* 隐藏内容 */
.hidden {
display: none;
}
/* 当某个section被选中时显示 */
#section1:target,
#section2:target,
#section3:target {
display: block;
}
id，与导航链接的href属性相匹配。.hidden类用于隐藏内容。:target伪类选择当前URL片段对应的元素，并设置其display属性为block以显示内容。使用:checked伪类和相邻兄弟选择器，可以实现纯CSS的选项卡选中高亮效果。
运维人员的福音来了，lcjmSSL支持证书到期前自动重申，配合自动部署功能，实现了真正的无感续期。不再需要每年甚至每三个月担心证书过期导致业务中断。从2018年至今，8年的稳定运行证明，自动化运维可以如此简单可靠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS选项卡选中高亮</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tabs">
<input type="radio" id="tab1" name="tab-group" checked>
<label for="tab1">Tab 1</label>
<input type="radio" id="tab2" name="tab-group">
<label for="tab2">Tab 2</label>
<input type="radio" id="tab3" name="tab-group">
<label for="tab3">Tab 3</label>
<div class="tab-content" id="content1">
<p>Content for Tab 1</p>
</div>
<div class="tab-content hidden" id="content2">
<p>Content for Tab 2</p>
</div>
<div class="tab-content hidden" id="content3">
<p>Content for Tab 3</p>
</div>
</div>
</body>
</html>
/* 初始样式 */
body {
font-family: Arial, sans-serif;
}
.tabs {
display: flex;
flex-direction: column;
}
.tabs input[type="radio"] {
display: none;
}
.tabs label {
padding: 10px 20px;
border: 1px solid #ccc;
border-bottom: none;
background-color: #f9f9f9;
cursor: pointer;
}
.tabs label:hover {
background-color: #eee;
}
.tabs .tab-content {
display: none;
padding: 20px;
border: 1px solid #ccc;
border-top: none;
}
/* 选中状态 */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
display: block;
}
/* 高亮效果 */
#tab1:checked ~ label[for="tab1"],
#tab2:checked ~ label[for="tab2"],
#tab3:checked ~ label[for="tab3"] {
background-color: #4CAF50;
color: white;
}
<input type="radio">创建选项卡，每个选项卡有唯一的id，并共享同一个name属性。使用<label>显示选项卡标题，并与对应的<input>关联。<input>元素。通过:checked伪类和相邻兄弟选择器控制内容的显示和高亮效果。这两个示例展示了纯CSS在交互效果方面的强大能力，无需JavaScript即可实现复杂的用户界面交互。
深入解析CSS Flex布局中的`gap`属性，揭示其在控制子元素间隙上的革命性优势。告别繁琐的`margin`技巧，`gap`以简洁、高效的方式实现行列间距，尤其在响应式设计中表现卓越，大幅提升开发效率与代码可维护性。
本文详细介绍了通过CSS和JavaScript实现`div`元素隐藏的多种技术。深入探讨了CSS中的`display: none`（完全移除）和`visibility: hidden`（保留空间但不可见）两种核心方法，并阐述了JavaScript如何实现元素的动态显示与隐藏。读者将理解不同方法间的差异，并能根据项目需求，精确选择最适合的隐藏策略，提升网页交互体验。
深度解析移动端HTML表格滑动与表头固定方案。文章详细介绍如何利用CSS的`overflow`属性实现水平滑动，以及`position: sticky`固定表头。更进一步，结合CSS变量和JavaScript媒体查询，使表头背景色自适应系统主题。全面提升移动端表格的用户体验，告别数据查看难题。
还在手动调整图片位置？OUT啦！本文带你玩转现代CSS布局技巧，用Flexbox和Grid布局轻松实现图片上下居中。告别繁琐代码，一行CSS让你的图片乖乖待在中间，让页面布局瞬间提升颜值与用户体验，快来get这些超酷技巧吧！