如何在UL列表项中通过自定义属性显示对应国家国旗？

嘿，你遇到的问题其实是因为CSS里的attr()函数目前还不能直接在background-image中引用元素属性的值——这个用法还没被主流浏览器广泛支持呢。我给你调整了一套可行的方案，用CSS变量+JavaScript来实现，既符合HTML规范又能稳定运行：

修正后的代码示例 #

HTML部分（改用标准data属性） #

<ul class="select-box" id="slcCountry">
  <li data-flag="https://restcountries.eu/data/afg.svg">AFG</li>
  <li data-flag="https://restcountries.eu/data/chn.svg">CHN</li>
  <li data-flag="https://restcountries.eu/data/usa.svg">USA</li>
</ul>

这里把自定义的flag属性改成了标准的data-flag，符合HTML自定义属性的规范。

CSS部分（使用CSS变量） #

.select-box {
  position: relative;
  padding-left: 0; /* 清除默认内边距 */
}

.select-box li {
  list-style: none;
  height: 34px;
  line-height: 34px;
  padding-left: 46px;
  position: relative;
}

.select-box li::before {
  position: absolute;
  background-size: 30px;
  background-repeat: no-repeat;
  left: 10px;
  top: 1px; /* 精准对齐行高 */
  width: 32px;
  height: 32px;
  content: "";
  /* 通过CSS变量获取国旗图片地址 */
  background-image: var(--flag-url);
}

JavaScript部分（动态设置CSS变量） #

// 遍历所有带data-flag属性的列表项
document.querySelectorAll('#slcCountry li[data-flag]').forEach(li => {
  const flagUrl = li.dataset.flag;
  // 给当前列表项设置CSS变量
  li.style.setProperty('--flag-url', `url(${flagUrl})`);
});

方案说明 #

1. 为什么原来的写法无效？
   CSS的attr()函数目前仅在content等少数属性中支持字符串值，对于background-image需要的<url>类型，主流浏览器还没有实现支持，所以url(attr(flag))这种写法无法生效。

2. 新方案的优势

   • 用data-*属性存储国旗地址，符合HTML规范；
   • 通过CSS变量传递图片地址，伪元素可以直接读取；
   • JavaScript动态赋值，扩展性强，新增国家时只需要添加对应的<li>元素即可，无需修改CSS。

内容的提问来源于stack exchange，提问作者Neeri