时间戳

首页 > 解决方案 > CSS :not() 选择器 - 隐藏正文中的所有内容，除了一个 div

html - CSS :not() 选择器 - 隐藏正文中的所有内容，除了一个 div

问题描述


除了 intro-class 和他的子元素之外，是否可以使用 CSS 隐藏所有身体内部元素？

body *:not(.intro > *) {
  opacity: 0;
}
<body>

  <h1>Welcome to My Homepage</h1>

  <div class="intro">
    <p id="firstname">My name is Donald.</p>
    <p id="hometown">I live in Duckburg.</p>
  </div>

  <p>My best friend is Mickey.</p>

</body>

标签： htmlcss

解决方案

您可以隐藏 body 的所有直接子元素，除了.intro. 不透明度将应用于元素及其所有子元素。

body>*:not(.intro) {
  opacity: 0;
}
<body>
  <h1>Welcome to My Homepage</h1>
  <div class="intro">
    <p id="firstname">My name is Donald.</p>
    <p id="hometown">I live in Duckburg.</p>
  </div>
  <div class="outro">
    <p id="firstname">My name is Mickey.</p>
    <p id="hometown">I live in Mickeyburg.</p>
  </div>
  <p>My best friend is Mickey.</p>
</body>

推荐阅读