奇怪的CSS媒体查询逻辑

我正在做一个项目,我遇到了一个问题.我将向您展示以下演示示例:

这是css代码:

    *, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    border: 0;
}

@media only screen and (max-width: 600px) {
    div {
        background: blue;
    }
}


@media only screen and (min-width: 601px) and (max-width: 1000px)  {
    div {
        background: green;
    }
}


@media only screen and (min-width: 1001px) {
    div {
        background: red;
    }
}

所以我的div应该是:

蓝色从0px到600px

绿色从601px到1000px

红色从1001px到...

相反,它是:

蓝色从0px到600px

白色在601px

绿色从602px到1000px

白色在1001px

红色从1002px到...

为什么？似乎(min-width:)不具有包容性.

所以我尝试过:

    *, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    border: 0;
}

@media only screen and (max-width: 600px) {
    div {
        background: blue;
    }
}


@media only screen and (min-width: 600px) and (max-width: 1000px)  {
    div {
        background: green;
    }
}


@media only screen and (min-width: 1000px) {
    div {
        background: red;
    }
}

所以我的div应该是:

蓝色从0px到600px

绿色从601px到1000px

红色从1001px到...

相反,它是:

蓝色从0px到599px

绿色从600px到999px

红色从1000px到...

为什么？现在看来(min-width:)是包容性的.

但如果我尝试:

    *, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    border: 0;
}

@media only screen and (max-width: 601px) {
    div {
        background: blue;
    }
}


@media only screen and (min-width: 601px) and (max-width: 1001px)  {
    div {
        background: green;
    }
}


@media only screen and (min-width: 1001px) {
    div {
        background: red;
    }
}

似乎(min-width:)不再包容:

蓝色从0px到601px

绿色从602px到1001px

红色从1002px到...

我很迷惑.