Question

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

桌面CSS：

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

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

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

我想要实现的目标是，当Mobile css版本开始使用时，labelText_size类无关紧要，labelText应该占用它所能达到的所有宽度。如果我复制上述三个规则，并在每个规则中将宽度更改为100％，则此操作与预期一致。但是，如果我尝试执行以下操作

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

只有高度变化，宽度保持不变。

我认为这是因为规则越精确，它具有更高的优先级，但是没有办法告诉CSS，无论DOM元素有什么其他类，都应用所需的规则？

因为如果我为我的标签定义了20种不同尺寸的样式，我现在必须在我的移动css中定义相同的20种不同尺寸样式，而不是使用单一规则来覆盖其余样式。

编辑：我知道我可以通过将规则标记为重要来达到预期效果，但我宁愿不这样做，因为我不认为设置一些重要的东西是一个css的良好实践。

Answer 1

您可以使用attribute selectors：

来实现这一目标

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

Answer 2

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

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

用单类css

2 个答案: