CSS選項卡是網頁設計中常用的一種布局方式。通過使用不同的CSS樣式規則，可以輕松地為選項卡創建不同的效果。在本文中，我們將介紹如何使用CSS實現默認選項卡。

ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
li.tab-item {
float: left;
}
li.tab-item a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-bottom: 3px solid transparent;
}
li.tab-item a:hover {
background-color: #ddd;
}
li.tab-item.active a {
background-color: white;
border-bottom: 3px solid #ccc;
}
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ccc;
border-top: none;
}
.tab-content.active {
display: block;
}

以上CSS代碼包含了選項卡的樣式規則。我們首先創建了一個無序列表，將其設置為橫向浮動，并添加了一些基本樣式。每個選項卡都是一個列表項，其中包含一個錨元素。我們將選項卡的樣式與錨元素相關聯，因為我們希望它們具有相同的外觀。

在CSS中使用active類來標識當前選中的選項卡。當用戶點擊選項卡時，JavaScript代碼將為當前選項卡添加這個類。我們使用“display: none”將所有選項卡內容隱藏。當用戶點擊某個選項卡時，與該選項卡相關聯的內容將顯示出來，并將其包含元素標記為“active”類。

實現默認選項卡的方法很簡單。我們可以為某個特定選項卡添加“active”類來使其默認選中。此外，在頁面首次加載時，我們還可以使用JavaScript代碼將第一個選項卡標記為“active”類，從而確保頁面一開始的默認選項卡。