Weird CSS media queries logic

I was working on a project and I encountered a problem. I'll show you with the following demonstration example:

This is css code:

    *, *::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;
    }
}

So my div should be:

• blue from 0px to 600px
• green from 601px to 1000px
• red from 1001px to ...

Instead it is:

• blue from 0px to 600px
• white at 601px
• green from 602px to 1000px
• white at 1001px
• red from 1002px to ...

Why? It seems that (min-width:) is not inclusive.

So I tried:

    *, *::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;
    }
}

So my div should be:

• blue from 0px to 600px
• green from 601px to 1000px
• red from 1001px to ...

Instead it is:

• blue from 0px to 599px
• green from 600px to 999px
• red from 1000px to ...

Why? Now seems that (min-width:) is inclusive.

But If I try:

    *, *::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;
    }
}

Seems that (min-width:) is not inclusive again:

• blue from 0px to 601px
• green from 602px to 1001px
• red from 1002px to ...

I am confused.