CSS 列表样式

CSS为列表提供了专门的属性。使用list-style 属性来指定列表项标记的样式。

CSS中的选择器可以选中列表项 (比如,

)。也可以选中列表项的父节点 (比如,

)。此时列表项会继承父节点的样式。

无序列表#####

无序列表的每个列表项都用同样的方式标记。

CSS 有三种标记样式：




PS: 可以指定一个图片的URL来自定义标记样式。

有序列表#####

在有序列表中，每个列表项都被标记了不同的序号。

用list-style 属性指定标记样式：#####

• decimal
• lower-roman
• upper-roman
• lower-latin
• upper-latin

计数器#####

你可以用计数器来计数任何元素，不仅是列表元素。比如，在某些文档中你可能想计数标题和段落。

要想计数，你必须定义一个计数器。在计数开始前的某个元素上，设置 counter-reset 属性以重置计数器。被计数元素的父节点是一个不错的选择。当然，任何出现在被计数元素前面的元素都可以。

设置每个需要计数的元素的 counter-increment 属性为你的计数器名。

通过为选择器增加 :before:after 并设置 content 属性来显示计数器.

在content属性的值中设置 counter()，在括号内填上计数器的字。可选的是设置计数器类型。其类型和前面一节 有序列表中相同。

使用计数器自定义列表样式：

HTML######

  
    
    
    
  
  
 
    
The oceans
    

      
Arctic
      
Atlantic
      
Pacific
      
Indian
      
Southern
    
 
    
Numbered paragraphs
    
Lorem ipsum
    
Dolor sit
    
Amet consectetuer
    
Magna aliquam
    
Autem veleum
 
  
```
######CSS######

body {counter-reset: headnum;}
h3:before {
content: "(" counter(headnum, upper-latin) ") ";
counter-increment: headnum;
}
h3.numbered {counter-reset: mynum;}

p.numbered:before {
content: counter(mynum) ": ";
counter-increment: mynum;
font-weight: bold;
}```

效果######