IE（Edge）中:not(:nth-child():nth-last-child()) CSS声明不生效问题

1. :not伪类多选择器兼容问题 #

IE 以及 EdgeHTML 内核的旧版 Edge 不支持在 :not() 伪类中传入多个组合的伪类选择器，你写的 :not(:nth-child(2):nth-last-child(4)) 属于多伪类组合规则，会被浏览器直接忽略，导致整条CSS声明失效。

解决方案 #

将规则拆分为「通用赋值+特殊情况覆盖」的写法，避免在 :not() 中使用组合选择器：

/* 先给所有带formhidden类的petinfo区块设置默认样式 */
.formhidden[id*='petinfo_'] {
    outline: 1px solid black;
    margin-bottom: 24px;
}
/* 单独匹配初始状态的petinfo_0，覆盖掉不需要的样式 */
.formhidden[id*='petinfo_']:nth-child(2):nth-last-child(4) {
    outline: none;
    margin-bottom: 0;
}

2. outline属性兼容问题 #

IE/旧版Edge对outline的支持存在多处实现缺陷：比如不会给非聚焦状态的普通块级元素渲染outline、元素内部有visibility: hidden的子元素时outline渲染异常等，这也是你其他带outline的规则无法生效的核心原因。

解决方案 #

用border替代outline实现同等视觉效果，通过box-sizing和微调padding/margin抵消border对布局的影响：

/* 把所有规则中的outline替换为border，同步调整内边距抵消边框宽度 */
[id*='petinfo_']:not(.formhidden),
[id*='petproblem_']:not(.formhidden),
.formhidden[id*='petinfo_']:not(:nth-child(2):nth-last-child(4)) {
    border: 1px solid black;
    box-sizing: border-box;
    /* 原padding为24px 12px 12px，各方向减去1px边框宽度，避免布局偏移 */
    padding: 23px 11px 11px;
}

如果不想调整padding，也可以给元素加margin: -1px来抵消border占用的空间，和outline的无布局影响特性完全一致。

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