当另一个 div 被定位时如何影响另一个 div答案

【问题标题】：How to get another div affected when another one is targeted当另一个 div 被定位时如何影响另一个 div
【发布时间】：2021-12-30 20:44:25
【问题描述】：

/* Header styles */

* {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header {
  background-color: aqua;
  text-align: center;
  padding: 20px 0px;
}

header a {
  font-size: xx-large;
  margin: 10px;
  text-decoration: none;
  color: black;
  background-color: cyan;
  font-weight: bolder;
  padding: 0px 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header a:hover {
  background-color: darkcyan;
  color: white;
}


/* Header Styles End */


/* --- */


/* Sections Style */

#gallery,
#about,
#contact {
  display: none;
}

main {
  padding: 25px;
  background-color: aliceblue;
  margin: 10px;
}

#img {
  width: 100px;
  height: 100px;
}

#gallery:target {
  display: block !important;
}

#gallery:target~#home {
  display: none !important;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <a href="#home">Home</a>
    <a href="#gallery">Gallery</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </header>
  <main>
    <div id="home">
      <h1>
        Welcome To the Web Page where there at 4 sections! -
        <font size="10" color="grey">Home</font>
      </h1>
      <h2>Click them to see their relevant sections!</h2>
      <p>
        Here's a bunch of Lorem to make it seems a bit big. Better know Latin! Here it comes! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint blanditiis nulla mollitia quam, sequi consectetur, asperiores itaque minus ut, soluta obcaecati inventore
        hic natus dolorem. Repellendus vero optio temporibus esse. A few more. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolores amet saepe dignissimos, eligendi non sint nobis! Dignissimos, eligendi non sint nobis! Lorem Ipsum
        Dolor sit amet consectetur
      </p>
      <h2>And that's it, Here's a soothing gif</h2>
      <img src="https://i.pinimg.com/originals/4c/ba/93/4cba9388025117cb8c60a4f8610f90f5.gif" width="300">
    </div>
    <div id="gallery">
      <h1>Here's the gallery! Sorry...The images aren't available at the moment</h1>
    </div>
    <div id="#about"></div>
    <div id="#contact"></div>
  </main>
</body>

</html>

你好。我有 2 个 id 为 #home 和 #gallery 的 DIV。当我单击画廊时，我希望隐藏主页部分并显示画廊。我将id画廊设置为display:none;，然后使用伪选择器:target将其设置为display:block...像这样

#gallery {
    display: none;



/* Header styles */
* {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
header {
    background-color: aqua;
    text-align: center;
    padding: 20px 0px;
}
header a{
    font-size: xx-large;
    margin: 10px;
    text-decoration: none;
    color: black;
    background-color:cyan;
    font-weight: bolder;
    padding: 0px 15px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
header a:hover {
    background-color: darkcyan;
    color: white;
}
/* Header Styles End */
/* --- */
/* Sections Style */
#gallery, #about, #contact {
    display: none;
}
main {
    padding: 25px;
    background-color: aliceblue;
    margin: 10px;
}
#img {
    width: 100px;
    height: 100px;
}
#gallery:target {
    display: block !important;
}
#gallery:target ~ #home {
    display: none !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <a href="#home">Home</a>
        <a href="#gallery">Gallery</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </header>
    <main>
        <div id="home">
            <h1>
                Welcome To the Web Page where there at 4 sections! - 
                <font size="10" color="grey">Home</font>
            </h1>
            <h2>Click them to see their relevant sections!</h2>
            <p>
                Here's a bunch of Lorem to make it seems a bit big. Better know Latin! Here it comes! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint blanditiis nulla mollitia quam, sequi consectetur, asperiores itaque minus ut, soluta obcaecati inventore hic natus dolorem. Repellendus vero optio temporibus esse. A few more. Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci dolores amet saepe dignissimos, eligendi non sint nobis! Dignissimos, eligendi non sint nobis! Lorem Ipsum Dolor sit amet consectetur
            </p>
            <h2>And that's it, Here's a soothing gif</h2>
            <img src="https://i.pinimg.com/originals/4c/ba/93/4cba9388025117cb8c60a4f8610f90f5.gif" width="300">
        </div>
        <div id="gallery">
            <h1>Here's the gallery! Sorry...The images aren't available at the moment</h1>
        </div>
        <div id="#about"></div>
        <div id="#contact"></div>
    </main>
</body>
</html>




}
#gallery:target {
    display: block !important;
}

它确实有效，但画廊部分会弹出 在主页部分下方。我想要的是必须隐藏主页部分，或者正如您用技术术语所说，display:none 所以我希望主页部分受到目标#gallery 的影响。这个我试过了

#gallery:target ~ home {
    display: none !important;
}

但它不起作用。这是一张图片，以防您无法理解布局

没有目标#gallery

与目标#gallery

如果你能回答这个问题，请告诉我...

【问题讨论】：

~ 波浪号只会匹配兄弟姐妹 after #gallery，而不是之前。这可能是你的问题吗？或者，发布一个工作代码 sn-p 以便我们可以使用它:)
@Le-Roy Staines 我猜你可能是对的，我已经添加了代码 sn-p！

标签： html css pseudocode target

【解决方案1】：

您可以为此功能使用一些 JavaScript。以下代码在单击图库文本或主页文本时运行一个函数。它本质上所做的是隐藏所有其他部分，除了它应该显示的部分。这些函数将hide 类添加到所有部分，这会将它们隐藏起来，除了需要显示的部分。

function showHome() {
  sections.forEach(s => s.classList.add("hide"));
  home.classList.remove("hide");
}

function showGallery() {
  sections.forEach(s => s.classList.add("hide"));
  gallery.classList.remove("hide");
}

const home = document.getElementById("home");
const gallery = document.getElementById("gallery");
const sections = document.querySelectorAll(".section");

.hide {
  display: none !important;
}

.section {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#home {
 background-color: green;
}

#gallery {
 background-color: blue;
}

<div>
  <p onclick="showHome()">Home</p>
  <p onclick="showGallery()">Gallery</p>
</div>
<div class="section" id="home">
  <p>This is home!</p>
</div>
<div class="section hide" id="gallery">
  <p>This is gallery!</p>
</div>

【讨论】：