CSS排序小三角是網(wǎng)頁設計中常用的一種效果，通過它可以美化列表、表格、菜單等內容的排版，增強網(wǎng)頁的可讀性和用戶體驗。

<p>
排序列表
</p>
<ul>
<li>1. 第一項</li>
<li>2. 第二項</li>
<li>3. 第三項</li>
</ul>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 20px;
position: relative;
}
li::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #333;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
</style>

以上代碼中，通過設置字體的“l(fā)ist-style”為“none”來取消排序列表的默認樣式，使用“padding”和“margin”屬性分別設置列表和列表項的內外邊距。每個列表項的左側通過“padding-left”屬性留出一定距離，設置“position:relative”使得該項成為絕對定位的參照物。使用偽元素“l(fā)i:before”來插入排序小三角，并設置它的邊框樣式、邊框顏色和寬度。通過“position:absolute”絕對定位在列表項的左側，使用“top:50%”將其定位到中心位置，使用“l(fā)eft:0”將其定位到最左側，最后使用“transform:translateY(-50%)”將其向上平移至垂直居中的位置。

這樣一來，就可以獲得優(yōu)雅、簡潔的有序列表，使得網(wǎng)頁的排版效果更加美觀和實用。