如何在CSS规则中取消属性？（媒体查询与Bootstrap适配场景）

问题背景 #

使用Bootstrap的.btn-group-vertical实现垂直按钮组，桌面端显示正常，但需要在窄屏竖屏（设备宽度≤480px）下切换为水平布局。自定义媒体查询修改圆角样式后，发现原Bootstrap垂直按钮组的CSS规则仍在生效，导致部分圆角不符合预期。

原Bootstrap核心CSS规则：

.btn {
    border-radius: 0.375rem
}

.btn-group-vertical > .btn:not(:last-child) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group-vertical > .btn ~ .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

尝试的媒体查询（未达到预期）：

@media screen and (max-device-width: 480px) and (orientation: portrait) {
    .btn-group-vertical > .btn:not(:last-child) {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    .btn-group-vertical > .btn ~ .btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

以第一个按钮为例，原规则的border-bottom-left-radius: 0仍会生效，导致该按钮的右上角、右下角、左下角圆角均为0，无法继承.btn类的圆角样式。尝试过initial、inherit、revert关键字，均无法实现继承低优先级.btn类样式的效果。

核心原因 #

CSS的优先级机制是高优先级规则覆盖低优先级规则，同优先级下后声明的规则覆盖先声明的。.btn-group-vertical > .btn:not(:last-child)的选择器优先级高于.btn，因此即使媒体查询中未重新定义border-bottom-left-radius，原规则的该属性值仍会保留生效。

而initial、inherit、revert的作用逻辑不符合需求：

• initial：取属性的浏览器初始值（border-radius初始值为0），而非.btn的自定义值
• inherit：继承父元素的对应属性值，父元素未设置时无效
• revert：恢复到浏览器默认样式，而非自定义的低优先级样式

解决方案 #

方案1：直接指定目标属性值 #

既然.btn的圆角值是明确的0.375rem，在媒体查询中直接将需要恢复的属性设为该值，覆盖原规则的取值：

@media screen and (max-device-width: 480px) and (orientation: portrait) {
    .btn-group-vertical > .btn:not(:last-child) {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0.375rem; /* 匹配.btn的圆角值 */
    }

    .btn-group-vertical > .btn ~ .btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 0.375rem; /* 匹配.btn的圆角值 */
    }
}

注意：确保这段自定义CSS在Bootstrap CSS之后加载，保证同优先级下后声明的规则生效。

方案2：拆分媒体查询，避免规则重叠 #

将Bootstrap垂直按钮组的样式限制在桌面端生效，窄屏竖屏时不加载原垂直样式，自然继承.btn的圆角：

/* 桌面端（宽屏或横屏）应用垂直按钮组样式 */
@media screen and (min-device-width: 481px), screen and (orientation: landscape) {
    .btn-group-vertical > .btn:not(:last-child) {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .btn-group-vertical > .btn ~ .btn {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

/* 窄屏竖屏应用水平布局样式 */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
    .btn-group-vertical > .btn:not(:last-child) {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    .btn-group-vertical > .btn ~ .btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

这种方式彻底避免了窄屏时原垂直按钮组规则的干扰，无需额外覆盖属性值。

总结 #

CSS中没有直接的方法让属性回到低优先级规则的取值，因为优先级机制决定了高优先级规则的未覆盖属性会持续生效。最可靠的解决方式是直接指定目标值或拆分媒体查询隔离规则生效范围。

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