在設計網頁時,無序列表是常用的元素之一,利用 CSS 可以給無序列表的符號填充不同的顏色,更好的進行視覺效果設計。
ul { list-style: none; padding: 0; margin: 0; } li:before { content: ""; display: inline-block; width: 10px; height: 10px; vertical-align: middle; margin-right: 10px; background-color: #ccc; border-radius: 50%; } li:nth-child(odd):before { background-color: #f00; } li:nth-child(even):before { background-color: #0f0; }
以上示例代碼中,通過給 li 元素添加偽類,控制前綴元素(也就是符號)的樣式,通過 :before 偽類來進行樣式控制。通過 nth-child 選擇器選擇 li 元素的奇數或者偶數來控制其填充顏色。
通過以上 CSS 控制代碼,我們可以實現一個帶不同填充顏色的無序列表。
上一篇css無法背景定位
下一篇css無法導入html