HTML：列表，子列表和伪构件

Question

我需要创建类似的列表：http://jsfiddle.net/BkBZJ/

只，而无需在HTML（名单内的类或嵌套列表span标签）的额外的标记。
有谁知道的一种方式，我可以做到这一点，说有一个伪元素，如前/后，最后一个孩子，第n个孩子等等

，或者这是不可能没有的附加标记HTML。

Answer 1

嗯，你总是可以使用：第n个孩子（x），其中x是一个你想要修改，然后对其应用余量以及颜色：对其进行更改。

例如：http://jsfiddle.net/PcA4u/

Answer 2

根本就the following (JSFiddle)：

CSS

body { 
    background: #202024; 
    color: #FFF; 
    font: .75em Arial, san-serif; 
} 

h1 { 
    font: 1.25em Arial, san-serif; 
    text-transform: uppercase; 
} 

#education dt { margin-top: 15px;} 
#education dd { 
    text-indent: 25px; 
    color:#C5B7A6; 
} 
/* Add the dashes where appropriate */ 
#education dd:before { 
    content: "- "; 
    display: inline-block; 
} 
/* Override the styles for specific dds */ 
#education .co {color:#FFF; margin-left:50px;} 

/* Or, alternately if all except the first dd should be white */ 
#education dd:first-child { color: #C5B7A6; margin-left: 0; } 
#education dd { color: #FFF; margin-left: 50px; } 

HTML

<div id="education"> 
<h1>Education</h1> 
<dl> 
    <dt>Holmsglen Institute of TAFE</dt> 
     <dd>Certificate II &amp; Certificate III of Multimedia</dd> 
    <dt>RMIT University</dt> 
     <dd>Advanced Diploma Of Interactive Media</dd> 
    <dd>2D Animation Major</dd> 
    <dt>Swinburne University</dt> 
     <dd>Bachelors Degree of Digital Media</dd> 
     <dd class="co">Branding &amp; Advertising Co-Minor</dd> 
     <dd class="co">Motion Graphics Co-Minor</dd> 
</dl> 
</div>​