响应式搜索栏

Question

max-width: 380px; 处的文本应该会消失，并且只会出现搜索图标。但是，文本并没有消失。

@media screen and(max-width: 380px) {
  nav div form span .text {
    display: none;
  }
}

<div class="search-container">
  <form>
    <input type="text" placeholder="Search..." name="search" />
    <button type="submit">
      <i class="fas fa-search"></i><span class="text">Search</span>
    </button>
  </form>
</div>

Answer 1

正如@AHaworth 在 cmets 中所说，空格选择兄弟姐妹，无论是否直接。因此，如果您在 div 内有跨度，或者在 div 内的 p 内有跨度，div span 会选择它。那不是你想要的。你想要span.text。这会选择 spans 和 text 类。

@media only screen and (max-width: 380px) {
  span.text {
    display: none;
  }
}

<nav>
  <div class="search-container">
    <form>
      <input type="text" placeholder="Search..." name="search">
      <button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
    </form>
  </div>
</nav>

<script src="https://use.fontawesome.com/6ba8be0f46.js"></script>

JSFiddle -- Resize the window here.