CSS:是否可以创建一个只覆盖给定媒体查询中的属性的类？

Question

这是我的课:

.center-block-xs {
  // This style is given to an image. I want the image to keep
  // its original CSS (whatever the default display and margin
  // is for an image) unless the screen size fits within the 
  // media query below.
}

@media(max-width:767px) {
  .center-block-xs { 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
  }
}

基本上，我想做的是:如果一个元素有 .center-block-xs 类，那么只有当屏幕尺寸在媒体查询。我知道我可以做到这一点:

@media(max-width:767px) {
  .color-red-xs { color: red; }
}

@media(min-width:768px){
  .color-red-xs { color: black; }
}

在这种情况下，仅当屏幕尺寸在媒体查询范围内时颜色为红色，否则它会被黑色覆盖。但我不想在我的情况下覆盖任何 CSS；我只希望 CSS 保持正常状态，除非屏幕尺寸在媒体查询范围内。这可能吗？

Answer 1

您所描述的正是 CSS 和媒体查询在默认情况下的工作方式。如果您在媒体查询中定义了 .center-block-xs 类，则该定义将仅应用于 a) 具有该类的元素，当 b) 媒体查询规则适用时。如果您希望应用继承的样式，则无需显式定义替代案例。