logo标签列表

CSS :not()选择器 - 隐藏除一个div以外的所有body内容

htmlcss
3

是否可以使用CSS隐藏除intro-class及其子元素以外的所有body内部元素？

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>

3个回答
5
你可以隐藏元素的所有直接子元素，除了.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>

1
你可以使用:not选择器隐藏除.intro之外的所有元素，然后显示.intro内部的所有子元素。 

body *:not(.intro) {
  opacity: 0;
}
.intro > * {
  opacity: 1 !important;
}
<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>

1
在这个例子中，:not()选择器不再需要，因为!important将覆盖*选择器。 - Simplicius
不行，它仍然需要 :not()，你可以运行没有 :not() 的代码，你会发现它不起作用。 - Ivan Frolov
2
不，我没有。CSS中的覆盖原则适用于所有元素。https://codepen.io/SimplyCius/pen/BaKGeXr - Simplicius
你也可以去掉 !important，因为在 CSS 中，以下的 style-rules 有能力覆盖前面的规则。https://codepen.io/SimplyCius/pen/qBZQzBN - Simplicius
你说得对。opacity 看起来与 visibility 的行为不同。由于父容器 [.intro] 也设置为 opacity: 0，因此其子元素无法覆盖该属性。但这是一种特定于属性的行为，可以轻松避免。这个批评并不是要表明你做错了，而是让 OP 和其他人知道更好的方法。> https://codepen.io/SimplyCius/pen/QWNJXbz - Simplicius
显示剩余2条评论
1
你可以简单地使用:not来显示所有想要显示的元素。仅在.intro上使用:not伪类也不会显示其子元素，因为你使用了*。 *将选择该页面上的所有元素。
body *:not(.intro):not(#firstname):not(#hometown) {
  opacity: 0;
}

演示：

body *:not(.intro):not(#firstname):not(#hometown) {
  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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接