Html 使用CSS根据上下文显示不同的背景图像（无需明确声明每个背景图像）

我知道我可以用

和

PHP

（或

javascript

）解决下面的问题，但如果可以的话，我想用

CSS

解决它

我已经标记了一个语言菜单，我想在每个命名语言旁边都显示一个标志图标

理想情况下，我不希望每次添加新语言时都必须向CSS添加新行

但是，是否有任何方法（使用

attr（）

或CSS自定义属性或其他方法）可以让浏览器为每个列表项导出正确的背景图像，只需使用（例如）

class=“fr”

和

数据语言=“fr”

N.B.我已经准备好了，这将超出CSS当前的功能范围——但我很好奇，是否有任何创新的方法来实现这一点

.language li{行高：40px；}
.language li:：在{内容：''之前；显示：内联块；位置：相对；宽度：27px；高度：27px；右边距：9px；垂直对齐：中间；背景色：rgb（191）；边框半径：3px；}
.language li.de:：在{background image:url（'/flags/de.png'）；}之前
.language li.en:：在{background image:url（'/flags/en.png'）；}之前
.language li.es:：在{background image:url（'/flags/es.png'）；}之前
.language li.fr:：before{background image:url（'/flags/fr.png'）；}

选择语言：

英语
德国
Español
法兰西

现在，我选择了：

CSS:

.language li img {
position:relative;
display:inline-block;
width:27px;
height:27px;
margin-right:9px;
vertical-align:middle;
border-radius:3px;
}

<?php

for ($i = 0; $i < count($Language_Key); $i++) {

echo '
<li class="'.$Language_Key[$i].'">
<a href="/'.$Language_Page[$i].'/">
<img data-language="'.$Language_Key[$i].'" src="/flags/'.$Language_Key[$i].'.png" title="'.$Language_Name[$i].'" alt="Language Flag ('.$Language_Name[$i].')" />'.$Language_Name[$i].'
</a>
</li>
';

}

?>

PHP:

.language li img {
position:relative;
display:inline-block;
width:27px;
height:27px;
margin-right:9px;
vertical-align:middle;
border-radius:3px;
}

<?php

for ($i = 0; $i < count($Language_Key); $i++) {

echo '
<li class="'.$Language_Key[$i].'">
<a href="/'.$Language_Page[$i].'/">
<img data-language="'.$Language_Key[$i].'" src="/flags/'.$Language_Key[$i].'.png" title="'.$Language_Name[$i].'" alt="Language Flag ('.$Language_Name[$i].')" />'.$Language_Name[$i].'
</a>
</li>
';

}

?>

但我仍然渴望听到任何创新的非预处理器方法，如果有一种聪明的方法在原生CSS中解决这个问题的话

---

（我承认，归根结底，这一切都无关紧要——这只是对优雅标记文档的持续追求）。

目前，如果没有Javascript或任何其他编程语言，这是不可能的。希望将来我们能够通过使用从元素中获取属性值

---

使用

伪元素时，它从原始元素获取属性。因此，您可以使用
背景图像：attr（'data-bg''url'）
来获取
数据bg
属性并将其视为url。
我认为应该添加
php
标记，因为使用
php
和
img
最容易解决这个问题。包括这个标签是错误的吗？如果您能解释为什么它是错误的，我将删除
php
标记。谢谢，@Epodax。您可能可以随意使用
attr（）
，但使用JS会更简单、更具语义。我相信在sass、POSTSS或cssnext中，您可以使用变量实现这一点，但我猜您只是在寻找一种普通的CSS方法。不，这在基本CSS中是不可能的……你需要一个预处理器，但它只会输出相同的CSS，这会使编写更容易，但不会减少冗长。可能是重复的，谢谢你的指针@Jerad！我从
背景色中看到：attr（数据语言url，“/flags/eu/”）
绝对是我正在寻找的那种东西的（未来的）原生CSS语法。非常欢迎您的光临，并祝您好运。希望它能很快上市。：）对哇。这是我见过的最差的CSS支持功能。请参阅：。