CSS修改默认列表元素样式
1. 修改默认元素样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>@counter-style circled-alpha {system: fixed;symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;suffix: " ";}ul > li {/* 默认实行圆 *//* list-style-type: disc; *//* 空心圆 *//* list-style-type: circle; *//* 实行方块 *//* list-style-type: square; *//* 阿拉伯数字有序列表 *//* list-style-type: decimal; *//* 格鲁吉亚符号 *//* list-style-type: georgian; *//* 汉字有序列表 *//* list-style-type: trad-chinese-informal; *//* 卡纳达符号 *//* list-style-type: kannada; *//* 自定义字符串符号(包括emoji) *//* list-style-type: '!~ '; *//* list-style-type: '⃞ '; *//* list-style-type: '⬜ '; *//* list-style-type: '◻️ '; */list-style-type: '🃉 ';/* @counter-style(可设置非常复杂的样式，要深入CSS的可以向下继续扩展/css-counter-styles-3/#the-counter-style-rule) *//* list-style-type: circled-alpha; */}</style><title>Document</title></head><body><ul><li>修改默认列表元素样式</li><li>修改默认列表元素样式</li> <li>修改默认列表元素样式</li></ul></body></html>
2. 或者使用伪元素选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><style>ul > li {list-style: none;}/* 用伪元素选择器，可以自己在li标签前面加一个元素，想要大小和颜色都可以像设置div一样设置上去 */ul li::before{display: inline-block;content: '';width: 10px;height: 10px;margin: 0 10px 0 0;background-color: rgba(233, 235, 236,1);}</style><title>Document</title></head><body><ul><li>修改默认列表元素样式</li><li>修改默认列表元素样式</li> <li>修改默认列表元素样式</li></ul></body></html>
