CSS是前端開發(fā)中最常用的技術(shù)之一，而列表也是我們最常見的元素之一。在一些網(wǎng)站中，我們會看到一些日期列表，并且相同日期的列表會被合并在一起顯示。這樣的效果即使在CSS中可以輕松實現(xiàn)。

/* HTML */
<ul><li>2021-10-01</li><li>2021-10-01</li><li>2021-10-02</li><li>2021-10-03</li><li>2021-10-03</li><li>2021-10-03</li></ul>/* CSS */
li {
margin-bottom: 10px;
}
li:after {
content: attr(data-date);
font-weight: bold;
margin-left: 5px;
}
li[data-date]:first-of-type:after {
content: attr(data-date);
font-weight: bold;
margin-left: 5px;
}
li[data-date]:not(:first-of-type) {
border-left: 5px solid #ccc;
padding-left: 10px;
}

以上代碼使用CSS的偽元素和屬性選擇器來實現(xiàn)。我們使用偽元素的content屬性來插入日期，并使用attr函數(shù)來獲取對應(yīng)的data-date屬性。對于同一日期的列表項，我們在第一個列表項之前插入日期，并使用:first-of-type選擇器來保證只有第一個列表項會顯示日期。對于其他列表項，我們使用:not(:first-of-type)選擇器來添加一個邊框和一些左內(nèi)邊距。

這個效果不但可以實現(xiàn)相同日期的列表合并顯示，還可以讓網(wǎng)頁更加美觀和易于閱讀。CSS的選擇器非常靈活，可以達到奇妙的效果。掌握好CSS選擇器的使用，可以讓我們的前端設(shè)計更加出色，吸引更多用戶的眼球。