CSS 列表样式
2016-09-13 本文已影响53人
勿以浮沙筑高台
CSS为列表提供了专门的属性。使用list-style 属性来指定列表项标记的样式。
CSS中的选择器可以选中列表项 (比如, <li>)。也可以选中列表项的父节点 (比如, <ul>)。此时列表项会继承父节点的样式。
无序列表#####
无序列表的每个列表项都用同样的方式标记。
CSS 有三种标记样式：
PS: 可以指定一个图片的URL来自定义标记样式。
有序列表#####
在有序列表中，每个列表项都被标记了不同的序号。
用list-style 属性指定标记样式：#####
- decimal
- lower-roman
- upper-roman
- lower-latin
- upper-latin
计数器#####
你可以用计数器来计数任何元素，不仅是列表元素。比如，在某些文档中你可能想计数标题和段落。
要想计数，你必须定义一个计数器。在计数开始前的某个元素上，设置 counter-reset 属性以重置计数器。被计数元素的父节点是一个不错的选择。当然，任何出现在被计数元素前面的元素都可以。
设置每个需要计数的元素的 counter-increment 属性为你的计数器名。
通过为选择器增加 :before:after 并设置 content 属性来显示计数器.
在content属性的值中设置 counter()，在括号内填上计数器的字。可选的是设置计数器类型。其类型和前面一节 有序列表中相同。
使用计数器自定义列表样式：
HTML######
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document 2</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<h3 id="oceans">The oceans</h3>
<ul>
<li>Arctic</li>
<li>Atlantic</li>
<li>Pacific</li>
<li>Indian</li>
<li>Southern</li>
</ul>
<h3 class="numbered">Numbered paragraphs</h3>
<p class="numbered">Lorem ipsum</p>
<p class="numbered">Dolor sit</p>
<p class="numbered">Amet consectetuer</p>
<p class="numbered">Magna aliquam</p>
<p class="numbered">Autem veleum</p>
</body>
</html>```
######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;
}```
效果######
