css - 仅针对特定输入元素禁用 Wordpress 自动 <p> 标签

Question

我知道我可以阻止 Wordpress 添加 <p>完全标记。但是，这不是一个选项，因为我必须处理依赖于这些标签的整个帖子存档，而且我不会及时返回手动修复每个帖子。

所以我的问题是，如何禁用自动 <p>一页甚至一个元素的标签？具体来说，我使用的是 CSS 代码 .jumpsection:focus + #section-nav-menu {visibility: visible;}对于下面的 HTML:

<div id="section-nav">
  <input type="text" value="GO TO SECTION" class="jumpsection"><p></p><!-- Grrr...Wordpress :( -->
  <div id="section-nav-menu">
    <ul class="contain">
      <li class="section-nav-item"><a href="#s1">SECTION 1</a></li>
      <li class="section-nav-item"><a href="#s2">SECTION 2</a></li>
      <li class="section-nav-item"><a href="#s3">SECTION 3</a></li>
      <li class="section-nav-item"><a href="#s4">SECTION 4</a></li>
    </ul>
  </div>
</div>

换句话说，如果我点击输入“GO TO SECTION”，section-nav-menu 会从 visibility: hidden; 变为至 visibility: visible;在我转动汽车之前它起作用了 <p>重新标记。但是正如您在 HTML 中看到的那样，Wordpress 添加了 <p></p>在输入元素之后，令我非常沮丧的是破坏了 :focus 的功能.

如果暂时禁用自动标记是不可能的，也非常感谢针对此特定问题的任何解决方法(让这个纯 CSS 点击下拉菜单工作)!!

Answer 1

您可以使用~ 选择器。像这样:

.jumpsection:focus ~ #section-nav-menu {
  visibility: visible;
}

演示 here

Here is some info about the ~ selector