用单 class css 覆盖多 classed css

Question

我使用两个单独的 CSS 文件和媒体查询来根据查看器的屏幕尺寸实现不同的样式。我的桌面 css 文件中有以下几行：

桌面 CSS:

.labelContainer .labelText.labelText_xl {
  width: 155px;
}

.labelContainer .labelText.labelText_big {
  width: 135px;
}

.labelContainer .labelText.labelText_med {
  width: 105px;
}

我想要实现的目标是，当移动 css 版本启动时，对 labelText_size class 无动于衷，labelText 应该占据它可以占用的所有宽度。如果我复制以上三个规则，并将每个规则的宽度更改为 100%，这将按预期工作。但是如果我尝试执行以下操作

.labelContainer .labelText {
  width: 100%;
  height: 32px;
}

只有高度改变了，宽度保持不变。

我想这是因为规则越精确，它的优先级就越高，但是没有办法告诉 CSS，无论其他 class是 DOM 元素，应用所需的规则？

因为如果我为我的标签定义了 20 种不同的尺寸样式，我现在也必须在我的手机中定义相同的 20 种不同的尺寸样式 css，而不是使用一个规则，它会覆盖休息。

编辑： 我知道我可以通过将规则标记为重要来实现预期的结果，但我宁愿不这样做，因为我不认为将某些内容设置为important 是 css.

中的一个好习惯

Answer 1

您可以使用 attribute selectors:

来实现

.labelContainer .labelText[class*="labelText_"] {
    width: 100%;
    height: 32px;
}

Answer 2

您可以为 <html> 或 <body> 上的移动设备添加任何 class，并在您的移动 CSS 版本中使用它。例如：

.mobile .labelContainer .labelText {
    width: 100%;
    height: 32px;
}

用单 class css 覆盖多 classed css

Overwrite multi-classed css with single class css

html

css

css-selectors