如何仅移除伪元素:after的浏览器可访问性轮廓？

好的，我来帮你搞定这个问题。你想要的效果是：只有当按钮本身设置了outline:none时，才移除它的:after伪元素的轮廓，而不是不管按钮本身的样式，只要是.is-active状态就强制移除伪元素的轮廓。目前你的代码是无条件生效的，所以得调整一下逻辑。

方案一：使用CSS :has()选择器（现代浏览器推荐） #

:has()是CSS的父选择器，可以让我们基于元素自身的样式/状态来匹配并应用后续样式。这里我们可以用它来检测按钮本身是否设置了outline:none，再给伪元素设置样式：

/* 匹配内联样式设置了 outline:none 的按钮 */
.dropdown-button:has(&[style*="outline:none"]):global(.is-active):after,
/* 匹配带有 .no-outline 类（该类定义了 outline:none）的按钮 */
.dropdown-button:has(&.no-outline):global(.is-active):after {
  display: block;
  background-color: white;
  outline: none !important;
}

说明： #

• 第一个选择器针对**内联样式直接写了outline:none**的按钮（比如 <button class="dropdown-button" style="outline:none"></button>）。
• 第二个选择器针对添加了自定义.no-outline类的按钮，前提是这个类里已经定义了outline:none。
• 这样只有当按钮本身确实没有轮廓时，.is-active状态下的:after伪元素才会移除轮廓。

方案二：JavaScript辅助（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器（比如IE11），可以用JS检测按钮的计算样式，给符合条件的按钮添加额外类，再通过CSS匹配这个类：

JavaScript代码： #

// 初始化检测所有 dropdown-button
document.querySelectorAll('.dropdown-button').forEach(button => {
  const computedStyle = getComputedStyle(button);
  // 检查计算后的outline是否为none
  if (computedStyle.outline === 'none') {
    button.classList.add('button-has-no-outline');
  }
});

// 监听按钮样式变化（处理动态修改样式的场景）
const styleObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      const button = mutation.target;
      const computedStyle = getComputedStyle(button);
      if (computedStyle.outline === 'none') {
        button.classList.add('button-has-no-outline');
      } else {
        button.classList.remove('button-has-no-outline');
      }
    }
  });
});

// 给所有按钮添加样式监听
document.querySelectorAll('.dropdown-button').forEach(button => {
  styleObserver.observe(button, { attributes: true });
});

CSS代码： #

.dropdown-button.button-has-no-outline:global(.is-active):after {
  display: block;
  background-color: white;
  outline: none !important;
}

说明： #

• JS会检测按钮计算后的outline样式，如果是none就给按钮加button-has-no-outline类。
• 监听样式变化是为了处理动态修改按钮样式的场景（比如通过JS切换按钮的outline）。
• CSS只针对带有这个额外类的.is-active按钮，移除伪元素的轮廓。

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