CSS多个@media（min-width）不起作用

Question

希望这是一个非常简单的问题。

我有三个@media（min-width）语句从移动开始并构建到桌面。由于某种原因，第三个声明没有触发。

实施例：     .imgbox {height：100px;宽度：100px;}

@media (min-width: 768px) and (max-width: 899px)  { .imgbox { background-color:red; } } 

@media (min-width:900px) and (max-width: 1000px) {
        .imgbox { background-color:green;}
}​

@media (min-width:1001px) {
    .imgbox { background-color:blue;}
}​

JS小提琴在这里显示效果：https://jsfiddle.net/t5vh316h/（将中心分隔线拖到不同的宽度以便看到我的意思）

该框永远不会变为蓝色，最终查询似乎被忽略。为什么呢？！

谢谢。

Answer 1

你的JSFiddle中突出显示你现有的结束括号后面似乎有一个特殊字符：

只需删除这些尾随字符，如下所示：

__getitem__

哪个should resolve the issue：

Answer 2

媒体查询后问题是dots不必要的。我已经更新了你的小提琴

https://jsfiddle.net/t5vh316h/4/

.imgbox {height: 100px; width: 100px;}

@media (min-width: 768px) and (max-width: 899px)  { 
   .imgbox { background-color:red; } 
}   

@media (min-width:900px) and (max-width: 1000px) {
    .imgbox { background-color:green;}
}

@media (min-width:1001px) {
    .imgbox { background-color:blue;}
}

Answer 3

事实证明你有一些垃圾unicode字符＃8203，删除后，你的小提琴工作了。

https://jsfiddle.net/t5vh316h/5/

print (df[df.Description.str.contains('|'.join(df.Ethnicity))])
  Ethnicity          Description
0    French  Irish Dance Company
3     Dutch               French
4   English        EnglishFrench
5     Irish       Irish-American