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は変更するものであり、次に余白を適用します-左と色：変更します。

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

于 2012-09-04T04:08:13.147 に答える