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处理或缺少定义。

Answer 2

你是如何实现CSS的？在您的HTML中或在单独的文件中？如果是单独的，则需要将CSS文件与<link href="CSSFILE.css" rel="stylesheet" type="text/css">相关联。它也需要在同一目录中。

在网站

2 个答案: