遇到问题 select 一个元素而其他元素在 :target

Question

我刚开始学习如何使用 html5 和 css3，我遇到了这个问题：

有没有办法在 :taget 与 css 一起使用时 select 其他元素？

我举个例子解释一下：

Html:
<body>
<header>
<nav id="menu">
    <ul id="buttons">
       <li><a href="#">button</a></li>
       <li><a href="#">button</a></li>
    </ul>
</nav>
</header>

<section id="one">
   <h2>title</h2>
   <p>text</p>
<section>
</body>

想法是将#menu 放在目标上并制作#one，例如，更改它的颜色。我读过关于“siblings selectors”（我认为是 + 和 ~）的可能解决方案，如果两个元素都是 body?

的儿子

对不起我的英语，这不是我的母语。提前致谢！

Answer 1

首先验证您的 HTML 代码

没有 </ul> 关闭标签。
</a> 标签不需要 <li> 标签。

<body>
    <header>
    <nav id="menu">
        <ul id="buttons">
           <li>text</li>
           <li>text</li>
        </ul>
    </nav>
    </header>
    
    <section id="one">
       <h2>title</h2>
       <p>text</p>
    <section>
</body>

如何使用:target.

:targetCSSpseudo-class表示一个id匹配URL的唯一元素（目标元素）的片段。

/* Selects an element with an ID matching the current URL's fragment */
:target {
  border: 2px solid black;
}

例如，下面的 URL 有一个片段（由 # 符号表示）指向名为 section2 的元素：

http://www.example.com/index.html#section2

当当前 URL 等于以上时，:target 选择器将选择以下元素：

<section id="section2">Example</section>

工作演示

:target {
  color: #00cc00;
}

<h3>Table of Contents</h3>
<ol>
 <li><a href="#p1">Jump to the first paragraph!</a></li>
 <li><a href="#p2">Jump to the second paragraph!</a></li>
 <li><a href="#nowhere">This link goes nowhere,
   because the target doesn't exist.</a></li>
</ol>

<h3>My Fun Article</h3>
<p id="p1">You can target <i>this paragraph</i> using a
  URL fragment. Click on the link above to try out!</p>
<p id="p2">This is <i>another paragraph</i>, also accessible
  from the links above. Isn't that delightful?</p>

遇到问题 select 一个元素而其他元素在 :target

Having trouble to select an element while other is in :target

html

css

target