我需要创建一个类似的列表:http: //jsfiddle.net/BkBZJ/
只是,没有 HTML 中的额外标记(带有类的跨度标签或列表中的嵌套列表)。
有谁知道我可以实现这一点的方法,例如使用伪元素,例如之前/之后,最后一个孩子,第 n 个孩子等......
或者如果没有 HTML 中的附加标记,这是不可能的。
我需要创建一个类似的列表:http: //jsfiddle.net/BkBZJ/
只是,没有 HTML 中的额外标记(带有类的跨度标签或列表中的嵌套列表)。
有谁知道我可以实现这一点的方法,例如使用伪元素,例如之前/之后,最后一个孩子,第 n 个孩子等......
或者如果没有 HTML 中的附加标记,这是不可能的。
只需执行以下操作(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 & 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 & Advertising Co-Minor</dd>
<dd class="co">Motion Graphics Co-Minor</dd>
</dl>
</div>
好吧,您始终可以使用 :nth-child(x) ,其中 x 是您要修改的那个,然后对其应用 margin-left 以及颜色:更改为它。
例如:http: //jsfiddle.net/PcA4u/