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>的顶部添加一些死区。然后，绝对将您选择的项目置于顶部。

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

您需要的CSS：

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

Answer 2

如果您确定知道<dd>没有包裹，那么您可以这样做：

dl {
  position: relative;
  padding-top: 20px; /* or whatever your line-height is */
}

dd[lang="fr"] {
  position: absolute;
  top: 0;
}

有关实例，请参阅this fiddle。

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

2 个答案: