不正确的媒体查询应用于 html 元素

Question

我有一个为2组设备(媒体查询(iPhone 6/7/8和iPhone X编写的类。

除了度量之外，类的属性是相似的。

现在在这里，如果我首先为iPhone 6/7/8编写了媒体查询，最后为iphone X编写了媒体查询，那么后面的媒体查询适用，如果我颠倒这些媒体查询的顺序也是如此。以下是详细信息：

@media only screen and (min-width: 375px) and (max-width: 812px) {
.datepicker.dropdown-menu{
width: 312px !important;
/* font-family: "Avenir_Book" !important; */
height:319px !important;
box-shadow:none !important;
top:305px !important;
border-radius:16px !important;
padding:0px 0px 0px 0px !important;
}
.table-condensed {
width: 310px !important;
height:294px !important;
}
.datepicker table tr td {
width: 30px !important;
}
.table-condensed tr {
width: 255px !important;
height: 39px;
}
.datepicker-days table thead {
width: 260px !important;
}
.datepicker-days table tbody {
width: 210px !important;
}
}
@media only screen and (min-width: 375px) and (max-width: 667px)  {
.datepicker.dropdown-menu{
width: 310px !important;
/* font-family: "Avenir_Book" !important; */
height:319px !important;
box-shadow:none !important;
top:160px !important;
border-radius:16px !important;
padding:0px 0px 0px 0px !important;
}
.table-condensed {
width: 308px !important;
height:294px !important;
}
.datepicker table tr td {
width: 30px !important;
}
.table-condensed tr {
width: 255px !important;
height: 39px;
}
.datepicker-days table thead {
width: 260px !important;
}
.datepicker-days table tbody {
width: 210px !important;
}
}

我知道这是CSS的通用规则，其中最后一个将被应用，除非另一个被标记为重要。但是在这里，我对两个媒体查询都有"！important"。应该如何解决？

JSFiddle： jsfiddle.net/2cwwe0p4/20.

Answer 1

正如你所说，CSS 的工作方式是从上到下，最后比第一个更优先。 您的问题是您需要为iPhone X(最大宽度：812px(覆盖一些样式(据我所知(。 解决方案可能是以一种将所有样式应用于"仅@media屏幕和(最小宽度：375px(和(最大宽度：812px("的方式构建您的 CSS，并且应该首先写入 Css 文件。对于需要为iPhone 6/7/8(最大宽度：667px(覆盖的其余样式，应该在CSS文件中编写(想法是尽可能使代码通用，并在达到最大宽度：667时更改iPhone 6/7/8的样式(。

有关详细信息，请参阅 https://jsfiddle.net/gmbqLk5c/40/提琴。 详细信息是我一般已将红色边框应用于表格。但是当最大宽度：667px时，我已经覆盖了边框颜色：蓝色。此后，iPhone X将显示红色边框，但在设备下方将显示蓝色边框(不使用！important(。

<div class="container datepicker">
<table class="mt-2 table table-condensed">
<tbody>
<tr>
<td>
Sweden
</td>
<td>
13:00
</td>
<td>
South Korea
</td>
</tr>
<tr>
<td>
Bolivia
</td>
<td>
16:00
</td>
<td>
Guam
</td>
</tr>
<tr>
<td>
is
</td>
<td>
23:00
</td>
<td>
Hell
</td>
</tr>
</tbody>
</table>

</div>
<style>
@media only screen and (min-width: 375px) and (max-width: 812px) {
.datepicker table tr td {
border: solid 1px red;
}
}
@media only screen and (min-width: 375px) and (max-width: 667px)  {
.datepicker table tr td {
border: solid 1px blue;
}
}
</style>