選項卡是網頁中常用的一個組件，可以方便地展示不同的內容。在純css中，使用偽類和label元素可以很方便地制作選項卡。

<div class="tab">
<input type="radio" name="tab" id="tab-1" checked>
<label for="tab-1">選項一</label>
<div class="tab-content">內容一</div>
<input type="radio" name="tab" id="tab-2">
<label for="tab-2">選項二</label>
<div class="tab-content">內容二</div>
<input type="radio" name="tab" id="tab-3">
<label for="tab-3">選項三</label>
<div class="tab-content">內容三</div>
</div>

首先要將radio和label元素配對，使用for屬性和id屬性進行關聯。利用input[type="radio"]:checked 屬性，可以選中當前活動的元素。在label元素的樣式調用中，使用::before和::after偽類可以實現選項卡的下劃線和激活狀態的樣式。

.tab-content {
display: none;
}
input[type="radio"]:checked ~ .tab-content {
display: block;
}
label {
display: inline-block;
padding: 10px;
margin-right: 10px;
cursor: pointer;
position: relative;
}
label::before {
content: "";
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background-color: #ccc;
}
input[type="radio"]:checked + label::before {
background-color: #f00;
}

以上代碼就實現了純css的選項卡效果，當用戶點擊不同的選項時，展示不同的內容。如果需要添加更多的選項，只需要復制推出的代碼，并把id、for、label和內容進行修改即可。