選項卡是常用的頁面交互方式之一，通過點擊不同的選項卡來顯示相應的內容。在CSS中，可以使用偽類和選擇器來實現選項卡的樣式效果。

/* HTML結構 */
<div class="tab">
<ul class="tab-nav">
<li class="active">選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
<div class="tab-content">
<div class="active">選項卡1的內容</div>
<div>選項卡2的內容</div>
<div>選項卡3的內容</div>
</div>
</div>
/* CSS樣式 */
/* 選項卡導航 */
.tab-nav li {
list-style: none;
float: left;
margin-right: 10px;
cursor: pointer;
}
.tab-nav li.active {
/* 激活狀態 */
background-color: #f60;
color: #fff;
}
/* 選項卡內容 */
.tab-content div {
display: none;
}
.tab-content div.active {
display: block;
}

在以上代碼中，使用了“active”類名來表示激活狀態的選項卡和對應的內容。當鼠標點擊選項卡時，可以通過JavaScript來給相應的選項卡和內容添加“active”類名，實現選項卡切換的效果。