应用了哪个 CSS 属性？ [复制]答案

【问题标题】：Which css property gets applied? [duplicate]应用了哪个 CSS 属性？ [复制]
【发布时间】：2019-09-26 02:23:19
【问题描述】：

 @media(max-width:1920px) {

    .callbacks_tabs {
        left: 45%;
    }

}
@media(max-width:1440px) {

    .callbacks_tabs {
        left: 50%;
    }

}

使用上面的代码，例如屏幕宽度为 1200px，应用了哪个属性？

【问题讨论】：

标签： html css

【解决方案1】：

对于您的示例，它们都被应用，因为它们具有相等的 specificity。在这种情况下以最后出现的声明为准。

Specificity 是应用于给定 CSS 声明的权重，由匹配选择器中每个选择器类型的数量决定。当多个声明具有相同的特异性时，CSS 中的最后一个声明将应用于元素。

调整浏览器大小以查看蓝色 (

@media(max-width:2000px) {
    html {
        background-color:blue;
    }
}
@media(max-width:600px) {
    html {
        background-color:red;
    }
}

但是，如果您更改顺序，它永远不会是红色的，无论您使视口多么狭窄，因为即使 1px 宽仍然小于 2000px 最大宽度：

@media(max-width:600px) {
    html {
        background-color:red;
    }
}
@media(max-width:2000px) {
    html {
        background-color:blue;
    }
}

您可能会发现使用min-width 更合适。或者min-width 和 max-width的组合：

@media all and (max-width: 699px) and (min-width: 520px)

或者您可以设置默认样式，并且仅在视口至少为 x 宽时才覆盖它：

html {
    background-color:red;
}

@media(min-width: 600px) {
    html {
        background-color:blue;
    }
}

【讨论】：

【解决方案2】：

1200px 的屏幕宽度将使 50% 规则生效。它低于 1440，很明显，这是通过一个简单的测试发生的，将屏幕大小调整到所需的宽度，当您超过 1440 像素阈值时，会看到蓝条跳动。

 @media(max-width:1920px) {

    .callbacks_tabs {
        left: 45%;
    }

}
@media(max-width:1440px) {

    .callbacks_tabs {
        left: 50%;
    }

}

.callbacks_tabs {
  position:relative;
  background:blue;
}

https://jsfiddle.net/bqah8zr0/

【讨论】：

如果您投反对票，请告诉我原因，以便我日后更正