2

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

只是，没有 HTML 中的额外标记（带有类的跨度标签或列表中的嵌套列表）。
有谁知道我可以实现这一点的方法，例如使用伪元素，例如之前/之后，最后一个孩子，第 n 个孩子等......

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

4

2 回答 2

1

只需执行以下操作（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>​
于 2012-09-04T04:06:46.400 回答
1

好吧，您始终可以使用 :nth-child(x) ，其中 x 是您要修改的那个，然后对其应用 margin-left 以及颜色：更改为它。

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

于 2012-09-04T04:08:13.147 回答