html - 在网站上实现 css 的问题

Question

我正在尝试在我的网站上实现一些 BASIC css - 它是一个简单的树型菜单。

这是我为它创建的测试页面: http://www.worldheritagetrip.com/1309-2/

这是工作的 jsfiddle: https://jsfiddle.net/fadmrdbm/

和代码:

<ul class="collapsibleList">
 <li>
  <label for="mylist-node1">Click to open list 1</label>
  <input type="checkbox" id="mylist-node1" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
 <li>
  <label for="mylist-node2">Click to open list 2</label>
  <input type="checkbox" id="mylist-node2" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
</ul>

和CSS:

.collapsibleList li > input + * {
 display: none;
}

.collapsibleList li > input:checked + * {
 display: block;
}

.collapsibleList label {
 cursor: pointer;
}

我已经将 html 和 css 完全复制到我的 wordpress 页面，但它失败了:(

有人能发现问题吗？

Answer 1

问题是 Wordpress 已将额外的标签添加到您的 HTML 中以尝试帮助输出。

拍一个look at this jsfiddle - 在其中，来自您网站的相关元素的 HTML 直接从呈现的 wordpress 输出中添加，同样的问题也出现了。 Wordpress 添加了一个 p 标签，

声明 .collapsibleList li > input + * 命中任何标签，无论类型如何，直接跟在 input 之后。在您原来的 jsfiddle 中，您使用了粘贴到 WordPress 中的 HTML，没有额外添加的标签，因此 ul 直接在输入之后。随着 Wordpresses 添加 p 标签，ul 现在不再直接跟在 input 之后。

您甚至可以在您的页面中看到这一点，该列表在不应该出现的时候出现了，但是点击也作用于 p 标签，它正在显示和隐藏自身并创建额外的你可以在那里看到的空白。

在检查器中选择 p 标签。您会看到正在更改空白的 margin-bottom，您还会看到上面应用的 css 选择器。同样在检查器中，您可以只删除 p 标记(不要刷新页面)，然后看到您的列表按预期工作，因为它返回到定义的 css 选择器中。

您可以通过确保在 HTML 中不留空白来消除错误的 WordPress 标签，或者您可以查看可能更健壮的 JavaScript 解决方案。

郑重声明，JSFiddle 会获取您盒子中的内容并确保它们已加载，因此您可以将某些东西放入其中并在孤立的意义上看到它在工作，但它不会将您引向外部库、wordpress 处理或缺少定义。