仅使用CSS根据ui-state-active类动态替换文本不生效如何解决

• 选择器层级不匹配：你编写的span.ui-state-active h4选择器规则为选中带ui-state-active类的span内部的h4元素，但提供的HTML结构中，span与h4是同级兄弟节点，h4位于span之后，不存在嵌套关系，因此该选择器无法命中目标元素。
• 样式逻辑存在问题：若直接给h4设置visibility: hidden，其内部的伪元素默认会继承该隐藏属性，即使单独给伪元素设置可见性，也会因为父级选择器未生效导致样式无法触发。

调整后的CSS代码 #

/* 命中带ui-state-active类的span之后相邻的h4，隐藏原有文本 */
#trackerDiv>#trackerNav>ol#tracker.delivery li#onroad span.ui-state-active + h4 {
  font-size: 0;
}
/* 插入替换文本，恢复正常字号显示 */
#trackerDiv>#trackerNav>ol#tracker.delivery li#onroad span.ui-state-active + h4::before {
  content: "Complete";
  font-size: initial;
}

方案说明 #

1. 用相邻兄弟选择器+匹配ui-state-active类span之后紧邻的h4元素，解决选择器匹配问题
2. 用font-size: 0隐藏h4原有文本，不会影响伪元素的显示，也不需要额外处理定位问题，布局兼容性更好

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