如何在CSS同一选择器块中排除特定类不应用position:absolute属性？

嘿，这确实是个挺实用的需求，但遗憾的是CSS本身并不支持在同一个选择器声明块内单独排除某个选择器的特定属性——也就是说，你没法像示例里那样用position: absolute (not: .class2)这种“例外语法”来实现。

为什么不行？ #

当你把多个选择器（比如.class1, .class2, .class3）放在同一个声明块里时，块内的每一条属性都会被平等应用到所有选择器上，CSS没有内置的机制让某一个选择器跳过特定属性。

可行的替代方案 #

虽然没法在同一个块里实现，但有几种优雅的方式可以达到你的需求：

方案1：拆分声明块（最兼容）

这是最直接也最适配所有浏览器的方式，把需要position:absolute的类和不需要的类分开声明，共享的属性可以保持一致：

/* 给需要绝对定位的类加完整样式 */
.class1, .class3 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

/* 给.class2加共享样式，去掉position属性 */
.class2 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

方案2：用CSS变量减少代码重复

如果不想重复写共享属性，可以用CSS变量来封装公共样式，让代码更易维护：

/* 定义共享样式变量 */
:root {
  --shared-layout: {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
  };
}

.class1, .class3 {
  position: absolute;
  @apply --shared-layout; /* 注：此语法需要PostCSS等预处理器支持 */
}

.class2 {
  @apply --shared-layout;
}

方案3：使用:not()伪类（现代浏览器）

如果你只需要支持现代浏览器，可以用:not()伪类来定位除.class2外的目标类，再配合全局共享样式：

/* 先给三个类都加上共享属性 */
.class1, .class2, .class3 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

/* 给除.class2外的类添加绝对定位 */
.class1:not(.class2), .class3:not(.class2) {
  position: absolute;
}

不过其实这个场景下，直接写.class1, .class3会更简洁，:not()适合更复杂的排除场景。

总结一下：目前没有办法在同一个选择器块内实现属性的选择性排除，拆分声明块或者用变量/伪类优化是最靠谱的方式~

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