您可以嵌套媒体查询多深？

Question

您可以将媒体查询嵌套多少层？与样式表根目录中的查询相比，嵌套媒体查询是否有任何限制？

我已经阅读了此answer。

Answer 1

我没有找到任何官方资源（这是CSS Conditional Rules Module Level 3的规范）。所以我尝试了。在Chrome中，我们至少可以嵌套40层深度。出于任何实际原因，这应该足够了。

@media screen and (max-width: 2001px) {
  body {
    background-color: gold;
  }
  @media screen and (max-width: 2002px) {
    body {
      background-color: silver;
    }
    @media screen and (max-width: 2003px) {
      body {
        background-color: goldenrod;
      }
      @media screen and (max-width: 2004px) {
        body {
          background-color: gold;
        }
        @media screen and (max-width: 2005px) {
          body {
            background-color: silver;
          }
          @media screen and (max-width: 2006px) {
            body {
              background-color: goldenrod;
            }
            @media screen and (max-width: 2007px) {
              body {
                background-color: gold;
              }
              @media screen and (max-width: 2008px) {
                body {
                  background-color: silver;
                }
                @media screen and (max-width: 2009px) {
                  body {
                    background-color: goldenrod;
                  }
                  @media screen and (max-width: 2010px) {
                    body {
                      background-color: green;
                    }
                    @media screen and (max-width: 2011px) {
                      body {
                        background-color: gold;
                      }
                      @media screen and (max-width: 2012px) {
                        body {
                          background-color: silver;
                        }
                        @media screen and (max-width: 2013px) {
                          body {
                            background-color: goldenrod;
                          }
                          @media screen and (max-width: 2014px) {
                            body {
                              background-color: gold;
                            }
                            @media screen and (max-width: 2015px) {
                              body {
                                background-color: silver;
                              }
                              @media screen and (max-width: 2016px) {
                                body {
                                  background-color: goldenrod;
                                }
                                @media screen and (max-width: 2017px) {
                                  body {
                                    background-color: gold;
                                  }
                                  @media screen and (max-width: 2018px) {
                                    body {
                                      background-color: silver;
                                    }
                                    @media screen and (max-width: 2019px) {
                                      body {
                                        background-color: goldenrod;
                                      }
                                      @media screen and (max-width: 2020px) {
                                        body {
                                          background-color: red;
                                        }
                                        @media screen and (max-width: 2021px) {
                                          body {
                                            background-color: gold;
                                          }
                                          @media screen and (max-width: 2022px) {
                                            body {
                                              background-color: silver;
                                            }
                                            @media screen and (max-width: 2023px) {
                                              body {
                                                background-color: goldenrod;
                                              }
                                              @media screen and (max-width: 2024px) {
                                                body {
                                                  background-color: gold;
                                                }
                                                @media screen and (max-width: 2025px) {
                                                  body {
                                                    background-color: silver;
                                                  }
                                                  @media screen and (max-width: 2026px) {
                                                    body {
                                                      background-color: goldenrod;
                                                    }
                                                    @media screen and (max-width: 2027px) {
                                                      body {
                                                        background-color: gold;
                                                      }
                                                      @media screen and (max-width: 2028px) {
                                                        body {
                                                          background-color: silver;
                                                        }
                                                        @media screen and (max-width: 2029px) {
                                                          body {
                                                            background-color: goldenrod;
                                                          }
                                                          @media screen and (max-width: 2030px) {
                                                            body {
                                                              background-color: blue;
                                                            }
                                                            @media screen and (max-width: 2020px) {
                                                              body {
                                                                background-color: red;
                                                              }
                                                              @media screen and (max-width: 2031px) {
                                                                body {
                                                                  background-color: gold;
                                                                }
                                                                @media screen and (max-width: 2032px) {
                                                                  body {
                                                                    background-color: silver;
                                                                  }
                                                                  @media screen and (max-width: 2033px) {
                                                                    body {
                                                                      background-color: goldenrod;
                                                                    }
                                                                    @media screen and (max-width: 2034px) {
                                                                      body {
                                                                        background-color: gold;
                                                                      }
                                                                      @media screen and (max-width: 2035px) {
                                                                        body {
                                                                          background-color: silver;
                                                                        }
                                                                        @media screen and (max-width: 2036px) {
                                                                          body {
                                                                            background-color: goldenrod;
                                                                          }
                                                                          @media screen and (max-width: 2037px) {
                                                                            body {
                                                                              background-color: gold;
                                                                            }
                                                                            @media screen and (max-width: 2038px) {
                                                                              body {
                                                                                background-color: silver;
                                                                              }
                                                                              @media screen and (max-width: 2039px) {
                                                                                body {
                                                                                  background-color: goldenrod;
                                                                                }
                                                                                @media screen and (max-width: 2040px) {
                                                                                  body {
                                                                                    background-color: yellow;
                                                                                  }
                                                                                }
                                                                              }
                                                                            }
                                                                          }
                                                                        }
                                                                      }
                                                                    }
                                                                  }
                                                                }
                                                              }
                                                            }
                                                          }
                                                        }
                                                      }
                                                    }
                                                  }
                                                }
                                              }
                                            }
                                          }
                                        }
                                      }
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

If we can nest media queries 40 Levels deeps the background should be yellow
<br><br>
Chrome 72 can<br>
Firefox 65 can<br>
Edge 17 can<br>