html - 使用 CSS 重新排序 dl/dt/dd 和 ul/ol/li 元素

Question

我有一个 HTML 格式的翻译列表。目前，暂时是这样的

<div class="translations">
    <dl>
        <dd lang="en">house</dd>
        <dd lang="fr">maison</dd>
        <dd lang="de">Haus</dd>
    </dl>
    <dl>
        <dd lang="en">dog</dd>
        <dd lang="fr">chien</dd>
        <dd lang="de">Hund</dd>
    </dl>
</div>

现在，我可以指定一种语言作为主要语言并使用 CSS 单独设置样式，即:

.translations dl dd[lang="fr"] {
    color: blue;
}

除了修饰主要翻译外，我还想将其移动到其 dl 中列表的顶部，例如上面的内容应该像写的一样呈现

<dl>
    <dd lang="fr">maison</dd>
    <dd lang="en">house</dd>
    <dd lang="de">Haus</dd>
</dl>

但纯粹使用 CSS 更改(无脚本)。

这可能吗？

Answer 1

是的。诀窍是在每个 <dl> 的顶部添加一些死 Angular 。使用填充。然后，绝对将您选择的元素放在顶部。

这是一个 jsFiddle:http://jsfiddle.net/2Wy8m/

您需要的 CSS:

.translations dl {
    position: relative;
    padding-top: 20px;
}
.translations dl dd[lang="fr"] {
    color:blue;
    position:absolute;
    top:0;
}