如何在XHTML文档中替换<details>元素的展开图标（含有无<summary>）

核心问题原因 #

原来的HTML兼容CSS在XHTML中失效，主要是两个原因：

1. XHTML对CSS伪元素语法要求更严格，双冒号::before/::after需改为单冒号:before/:after
2. 无<summary>时，浏览器自动生成的匿名<summary>在XHTML中无法通过常规CSS选择器精准控制

优先解决方案：JS补全+兼容CSS（全覆盖场景） #

步骤1：JS自动补全无summary的details元素 #

XHTML中，自动生成的匿名summary难以用CSS控制，先通过JS给所有缺失summary的details添加真实的summary标签：

var detailsList = document.getElementsByTagName('details');
for (var i = 0; i < detailsList.length; i++) {
  var detail = detailsList[i];
  if (detail.getElementsByTagName('summary').length === 0) {
    // XHTML需使用命名空间创建元素
    var summary = document.createElementNS('http://www.w3.org/1999/xhtml', 'summary');
    summary.textContent = '展开详情'; // 可自定义默认文本，或留空
    detail.insertBefore(summary, detail.firstChild);
  }
}

步骤2：兼容XHTML的CSS样式 #

使用单冒号伪元素替换默认图标，同时移除浏览器自带的标记：

/* 移除默认列表标记和webkit专用展开图标 */
details > summary {
  list-style-type: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* XHTML兼容的伪元素图标（单冒号） */
details > summary:before {
  content: "\25ba"; /* 向右箭头 */
  padding-right: 4px;
  font-size: 80%;
}
details[open] > summary:before {
  content: "\25bc"; /* 向下箭头 */
}

纯CSS备选方案（仅支持现代浏览器） #

如果目标浏览器支持CSS :has()选择器，可以不用JS，直接通过CSS处理两种场景：

/* 有summary的情况 */
details > summary {
  list-style-type: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary:before {
  content: "\25ba";
  padding-right: 4px;
  font-size: 80%;
}
details[open] > summary:before {
  content: "\25bc";
}

/* 无summary的情况 */
details:not(:has(summary)):before {
  content: "\25ba";
  padding-right: 4px;
  font-size: 80%;
  cursor: pointer;
}
details[open]:not(:has(summary)):before {
  content: "\25bc";
}

注意：该方案在老版本浏览器或严格XHTML解析环境下可能失效，优先推荐JS+CSS方案。

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