CSS是前端開發的基礎，其中的選項列表是非常常見的頁面元素。但是有時候需要將選項進行分組顯示。下面介紹如何使用CSS來實現選項列表的分組顯示。

<select>
<optgroup label="水果">
<option value="apple">蘋果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</optgroup>
<optgroup label="蔬菜">
<option value="carrot">胡蘿卜</option>
<option value="cucumber">黃瓜</option>
<option value="tomato">西紅柿</option>
</optgroup>
</select>

通過以上代碼可以創建一個包含兩個分組的選擇列表，其中每個分組都有一個標簽來描述它們的具體內容。現在我們需要使用CSS來定義這個列表的樣式。

select optgroup {
font-weight: bold;
color: #555;
}
select option {
padding-left: 20px;
}
select option:before {
content: "?";
margin-right: 5px;
color: #555;
}

第一個選擇器設置了分組選項的樣式，其中字體加粗且顏色為淺灰色。第二個選擇器設置了選項的內邊距，使得選項的文字距離標志點有一定的間隔。第三個選擇器設置了標志點的樣式，使用‘?’作為標志點，同時也設置了標志點的顏色。

通過以上代碼的設置，我們可以實現一個美觀、易讀的選項列表分組顯示。這可以幫助用戶更好地瀏覽選擇列表中的內容，提升用戶體驗。