css - 我可以定义我的自定义 CSS 媒体吗？

Question

我需要用我自己的 CSS 覆盖应用程序的主 CSS。有什么好的方法吗？一种方法是 !important 标签，我想避免。

我只是在想是否可以创建自定义 CSS 媒体并为该特定媒体定义我的 CSS。这样，我可以为除我的自定义媒体之外的所有内容定义主应用程序 CSS。

score 2 · Accepted Answer

如果您使用相同的选择器，CSS 会自行覆盖，因此您不需要 !important。

所以：

.my-div .my-span {
    color: green;
}

将被以下内容覆盖：

.my-div .my-span {
    color: red;
}

但不是：

.my-span {
    color: red;
}

是的，您可以使用媒体查询来定位特定的屏幕尺寸。例如像：

@media screen and (device-width: 360px) and (device-height: 640px)

score 1 · Accepted Answer

层叠样式表的一个主要“特征”是它的层叠效果。

互联网上许多地方对此的修正报价：

级联是特殊的部分。样式表旨在通过一系列样式规则级联，就像瀑布上的河流。河流中的水会撞击瀑布中的所有岩石，但只有底部的岩石会影响水流的确切位置。样式表中的级联也是如此。

因此，只要您指定完全相同的规则但更改这些规则中的某些属性值，并确保它们在原始规则之后加载，它们将覆盖这些规则中先前指定的属性值。如果您在新规则中跳过某个属性值，则先前指定的属性值将对该属性保持有效。

媒体查询是为特定类型的媒体定义样式的最佳答案。它允许您专门为某些屏幕尺寸指定规则。

如果您的特定目标媒体无法通过查询屏幕大小正确识别，但需要识别 JavaScript。您可以编写一些 JavaScript 在加载文档时加载样式表，在这种情况下，您只需确保在原始样式表之后加载它，然后它将覆盖具有相同特性的样式。

2 回答 2