Question

这是我的班级：

.center-block-xs {
    // this style is given to an image. I want the image to keep it's
    // 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，那么只有当媒体查询中的屏幕大小时才应该将CSS赋予该元素。我知道我可以这样做：

@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）媒体查询规则适用时。如果要应用继承样式，则无需明确定义备用案例。

Answer 2

只需将默认颜色设置为您想要的颜色即可。如下

.center-block-xs {
   color: red;
}

然后设置css的最小值来改变

@media(min-width: 767px) {
 .center-block-xs {
     color: black;
 }

}

当屏幕达到767px宽时，文本将会改变

CSS - 可以创建一个不允许任何样式被覆盖的类吗？

2 个答案: