Question

我的网站中有一部分我使用国家/地区的旗帜作为列表元素的图标。

例如，我有：

<ul>
  <li id="at">Austria</li>
  <li id="de">Germany</li>
</ul>

附带的CSS如下所示：

#at {
  list-style-image: url('at.png');
}
#de {
  list-style-image: url('de.png');
}

是否可以将其替换为宏，以便我不需要为每个国家/地区重新定义CSS？像C风格的宏会很棒，但我不确定CSS是否支持这种事情。

即

#_country {
  list-style_image: url('_country.png');
}

Answer 1

CSS本身不会这样做，但您始终可以从PHP脚本或类似程序提供CSS，在服务器端进行宏处理以从国家/地区列表中生成单独的规则。

Answer 2

由于CSS本身不具有宏系统，因此您必须明确地编写所有规则。因此，您可以选择server side solution（这会给加载带来额外的开销），或者使用文本编辑器的宏或代码段设置，您可以自己轻松生成规则。

有趣的是，如果CSS支持字符串连接并且attr()函数要在content属性之外使用，那么有人可以写：

.languages {
    background-image: attr(id) ".jpg";
}

Answer 3

简短回答：不。

更长的答案：你不应该依赖JavaScript来获得这样的功能，因为并不是每个人都启用了JavaScript，这就像打破了一个轮子上的苍蝇...

除了通过PHP，Perl，Python（在服务器端上运行，或者只在PC上运行一次并将文件保存为* .css）之外，没有任何东西可以帮助您节省复制的麻烦/粘贴这3行并为每个国家更改它们。

所以，就这样烦人的方式;）如果它只是那三行，我认为你的列表会很快放在一起。

Answer 4

可能的解决方案之一：

<!-- our lovely list-style-image function -->
<script>
  function set_list_country(list, country) {
    list.style.list-style-image = 'url("'+country+'.png")';
  }
</script>

<!-- country list -->
<ul>
  <li id="at">Austria</li>
  <li id="de">Germany</li>
</ul>

<!-- country list styling -->
<!-- note: this goes below your list, or else create onload function -->
<script>
  set_list_country(document.getElementById('at'), 'at');
  set_list_country(document.getElementById('de'), 'de');
</script>

问候。

Answer 5

不，你不能在普通的CSS中这样做，因为CSS语言没有控制结构或类似的东西，这将允许你以动态方式生成CSS代码。

相反，您可以使用Andrejs指出的javascript解决方案或基于PHP编码的CSS variables的解决方案。

Answer 6

虽然在脚本中生成CSS服务器端是一个选项。我更喜欢简单的javascript。

一些评论者指出，如果JS不可用，那么用户就不会看到这些标志....但如果js被禁用，那么还有什么不行 - 几乎每个'2.0'网站都有！

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Untitled Page</title>
  <script type="text/javascript">

     function initFlags() {

      var flagListItems = document.getElementsByTagName("li");

      for (var i = 0; i < flagListItems.length;  i++ )
      {
         var li = flagListItems[i];

        // use any prop you want to build the url - i used an expando one
        // just because i thought it made the code more readable.


        var f = li.getAttribute("flag");

        if (f == "" || f == null)  continue;

        li.style.listStyleImage = 'url(' + f + '.png)';

       }

    </script>
    </head>
    <body onload="initFlags()">
      <ul>
        <li id="at" flag="au">Austria</li>
        <li id="de" flag="de">Germany</li>
      </ul>
    </body>
</html>

是否可以在CSS中使用字符串宏？

6 个答案: