为什么@media all screen visibility:hidden 不起作用，而@media only screen 却起作用？

Question

我正在挑战 FCC，我遇到了一件奇怪的事情

visibility: hidden

当我将@media 查询用作 @media all screen 时不想工作，但是当我将媒体查询设置为 @media only screen the

visibility: hidden

属性很有魅力。

下面是 HTML 和 CSS 的代码片段，请查看并随时在 Codepen 上打开。

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

* {
  font-family: 'Roboto Mono', monospace;
  box-sizing: border-box;
}

#main-doc {
  margin-left: 300px;
}

nav {
  position: fixed;
  float: left;
  top: 0;
  left: 0;
  margin: 0 0;
  height: 100%;
  display: flex;
  flex-direction: column;  
  border: 2px solid grey;  
  background-color: #999;
  padding: 0px 45px 0px 45px;
  justify-content: center;
  align-items: center;
 
}

#navbar > header {
  padding: 35px 0px 35px 0px;
  font-weight: bold;
  font-size: 1.1em;
  background-color: wheat;
  width: calc(100% + 90px);
  text-align: center;
  flex-grow: 0;
}

#navbar > ul {
  flex-grow: 2;
  padding-left: 0;
}

li {
  list-style: none;
}

#list > li {  
  padding: 25px 5px 25px 5px;
}

#list > li::before {
  content: "_"; /*space doesn't count as character*/
  visibility: hidden;
}

#list > li:hover::before {
  content: "#"; /*space doesn't count as character*/
  visibility: visible;
  background-color: wheat;
}

#list > li:hover {
  background-color: wheat;
}

.nav-link {
  text-decoration: none;
  color: black;
}

#main-doc {
  display: block;
}

.main-section > header::before {
  content: "_"; /*space doesn't count as character*/
  visibility: hidden;
}

.main-section > header:hover::before {
  content: "#"; /*space doesn't count as character*/
  visibility: visible;
}

.main-section > header {
  font-weight: 700;
  font-size: 24px;
  background-color: wheat;
  padding: 15px 15px 15px 15px;
}

img {
  width: 100%; 
  height: 200px; 
  display: inline;
}

code {
  font-family: monospace;
  background-color: #000;
  color: #4ec;
}

@media only screen and (max-width: 940px){
  nav{
    visibility:hidden;
  }
  #main-doc {
    margin: 0;
  }
}

<nav id="navbar">
    <header>HTML Documentation</header>
  <ul id="list">
    <li><a href="#Introduction" class="nav-link">Introduction</a></li>
    <li><a href="#base_elements" class="nav-link">Base elements</a></li>
    <li><a href="#semantics" class="nav-link">Semantics</a></li>
    <li><a href="#forms" class="nav-link">Forms</a></li>
    <li><a href="#lists" class="nav-link">Lists</a></li>
    <li><a href="#tables" class="nav-link">Tables</a></li></ul>
</nav>
    
<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>Introduction</header>
    <article>
    <p>HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.</p>
    <p>"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>
    <p>HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements".</p>
    <img src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-small.png" alt="Anatomy of an HTML element">
      <p>Image Source: <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started" target="_blank">MDN</a></p>
<p>An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<" and ">".  The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture.</p>
    </article>
  </section>
  <section class="main-section" id="base_elements">
    <header>Base elements</header>
    <article>
    <p>There are 6 base elements within the HTML code, which are the following:</p>
    <ol>
      <li>html</li>
      <li>head</li>
      <ol>
        <li>meta</li>
        <li>link</li>
        <li>script</li>
      </ol>
      <li>body</li>
      </ol>
    <p>These tags form the basic layout of a simple webpage, in the order of appearance in the list above.</p>
    <p><code>html</code> - is the <strong>root element</strong></p>
    </article>
  </section>
  <section class="main-section" id="semantics"><header>Semantics</header>
    </section>
  <section class="main-section" id="forms"><header>Forms</header></section>
  <section class="main-section" id="lists"><header>Lists</header></section>
  <section class="main-section" id="tables"><header>Tables</header></section>
</main>

Answer 1

@media all screen {} 语法无效。

@media all, screen {} 有效。（里面的screen是多余的。）

@media only screen {} 是有效的，甚至可以写成 @media screen {}

因为only（和not）是logical operators，你放在media query之前用space分开. only 是隐含的，当明确使用时，它必须后跟 媒体类型 .

（有 and 运算符用于优化媒体查询，,（逗号）运算符用于分隔媒体查询。）

all和screen是media types。 all 在未明确使用时是隐含的。媒体查询可以通过与 and joiner 链接的媒体功能进行细化。多个媒体查询用逗号分隔。

/* these should be more or less equivalent: */
@media all {}
@media only all {}
@media screen, print, speech {}
@media only screen, only print, only speech {}
@media not some_unknown_media_type {}
@media only all and (min-width: 0) {}
@media not some_unknown_media_type and (min-width: 0) {}

（目前无法对媒体特征使用not，只能对明确的媒体类型使用。然后它只否定该媒体类型，而不是整个细化查询。）

为什么@media all screen visibility:hidden 不起作用，而@media only screen 却起作用？

Why is @media all screen visibility:hidden not working, while @media only screen does work?

html

css

media-queries