目标伪class 不是隐藏内容

Question

我正在尝试做一个水平菜单：当用户点击（或点击）一个选项时，内容出现在菜单下方，在同一页面；当用户点击另一个选项时，新内容与旧内容重叠；每个选项的内容都是可变的——可以很短也可以很长，可以滚动也可以不滚动。

我尝试在标签 p 上使用 'target'，基于此 link：https://www.w3.org/Style/Examples/007/target.en.html

但是当我使用hr或div或其他不仅仅是文本的标签时，出现此内容并且在p标签内无法识别，应该隐藏在哪里。

body {
  margin:0;   
  font-family: Calibri, Helvetica, Arial, sans-serif;
}

div.items p:not(:target) {display: none}
div.items p:target {  display: block; }

<body>
 <p class="menu">  
  <a href="#item1" class="menuLink">Item 1</a>
  <a href="#item2">Item 2</a>
  <a href="#item3">Item 3</a>
 </p>
 
 <div class="items">
  <p id="item1">
   11111 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.   
   <br><br>
   Item 1 paragraph 2 after a break line, but appears the content after tag hr or tag div from others items.
  </p>
  
  <p id="item2">
   22222 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.   
   <hr>
   Item 2 paragraph 2 after an hr tag, but showed at the start; not hidden inside a p item.
  </p>
  
  <p id="item3">
   33333 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.   
   <div>
    Item 3 paragraph 2 after a div class, but showed at the start; not hidden inside a p item.
   </div>
  </p>
 </div>
 
</body>

我做错了什么？

Answer 1

看来您只需为要隐藏的每种类型的标签添加另一个 CSS 规则即可。像这样：

div.items hr:not(:target), div.items p:not(:target) {display: none}
div.items hr:target, div.items p:target { display: block; }

只需根据需要添加任意数量的规则。更好的是，您可以将所有项目包装在 div 中，然后将 p、hr 等放入其中。

<div class="items">
  <div id="item1">
    <p>Some text</p>
    <hr />
    <p>Something else</p>
  </div>
  <div id="item2">
     ...
  </div>
  ...
</div>

然后就这样做：

div.items > div:not(:target) {display: none}
div.items > div:target { display: block; }

希望对您有所帮助。

Answer 2

您的代码将无法正常工作，因为您不能像在第 2 项和第 3 项中那样在段落中分别使用 <hr> or <div> 标记。检查：Putting <div> inside <p> is adding an extra <p>

如果删除它们，我认为代码将按预期工作。

代码如下：

body {
  margin:0;   
  font-family: Calibri, Helvetica, Arial, sans-serif;
}

div.items p:not(:target) {display: none}
div.items p:target {  display: block; }

<body>
  <p class="menu">
    <a href="#item1" class="menuLink">Item 1</a>
    <a href="#item2">Item 2</a>
    <a href="#item3">Item 3</a>
  </p>

  <div class="items">
    <p id="item1">
      11111 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.
      <br><br>
      Item 1 paragraph 2 after a break line, but appears the content after tag hr or tag div from others items.
    </p>

    <p id="item2">
      22222 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.
      Item 2 paragraph 2 after an hr tag, but showed at the start; not hidden inside a p item.
    </p>

    <p id="item3">
      33333 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin diam justo, scelerisque non felis porta, placerat vestibulum nisi. Vestibulum ac elementum massa. In rutrum quis risus quis sollicitudin. Pellentesque non eros ante. Vestibulum sed tristique massa.
      <span>
        Item 3 paragraph 2 after a div class, but showed at the start; not hidden inside a p item.
      </span>
    </p>
  </div>

</body>

目标伪class 不是隐藏内容

Target pseudo-class not hidden content

html

css

pseudo-class