使用 div 部分时的 CSS 选择器

Question

我试图在小屏幕上隐藏 div（仅限桌面）的内容，但我很难将样式表中的 css 应用到 div。我只能假设这是因为 div 嵌套在部件下，因为我对这些部件不是很熟悉。也许我使用了错误的选择器？任何帮助将不胜感激。

HTML：

<template id="header-sidebar-template">
  <div part="base">
    <div part="content">
      <header part="header">
        <div id="desktoponly">
          <p>Hello world!</p>
        </div>
      </header>
    </div>
  </div>
</template>

CSS：

@media (max-width: 1000px) {
   #desktoponly { display: none; } }

结果： 你好世界！在所有屏幕尺寸上显示（但我希望它隐藏在屏幕尺寸 1000px 以下）

Answer 1

而不是做

@media (max-width: 1000px) { #desktoponly { display: none; } }

做

@media screen and (max-width: 1000px) { #desktoponly { display: none; } }

它应该解决问题。