CSS自動切換選項卡是一種常見的頁面元素，能夠方便地展示不同內容，讓網頁更加生動。

實現CSS自動切換選項卡的關鍵是利用CSS選擇器和動畫過渡效果。

/* CSS代碼 */
.tab {
display: flex; /* 把選項卡作為一個橫向排列的Flex容器 */
}
.tab li {
list-style: none; /* 取消選項卡列表樣式 */
padding: 10px 20px; /* 添加選項卡內邊距 */
cursor: pointer; /* 添加鼠標手勢 */
background-color: #eee; /* 指定選項卡默認背景顏色 */
}
.tab li.active {
background-color: #fff; /* 指定當前選項卡背景顏色 */
font-weight: bold; /* 指定當前選項卡字體為粗體 */
}
.tabcontent {
position: absolute; /* 把選項卡內容設置為絕對定位，方便實現自動切換 */
opacity: 0; /* 初始狀態設置為不可見 */
transition: opacity 0.5s ease; /* 添加0.5秒的動畫過渡效果 */
}
.tabcontent.active {
opacity: 1; /* 當前選項卡內容設置為可見 */
}

以上代碼定義了一個選項卡（ul）和選項卡內容區域（div）。在選項卡中，每個li元素代表一個選項卡標簽，點擊時通過添加和移除.active類來實現選項卡的切換。在選項卡內容區域中，通過絕對定位和opacity屬性實現選項卡內容的自動切換過渡效果。