Question

的列表

仅在HTML中没有额外标记（列表中包含类或嵌套列表的span标记）有没有人知道我可以实现这一点的方式，比如使用伪元素，例如之前/之后，最后一个孩子，n-child等......

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

Answer 1

<强> 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>

Answer 2

你总是可以使用：nth-child（x）其中x是你要修改的那个，然后对它应用一个margin-left和一个颜色：更改它。

ex：http://jsfiddle.net/PcA4u/

HTML：列表，子列表和伪元素

2 个答案: