gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 11:50:22 27 4
gpt4 key购买 nike

我正在尝试在我的网站上实现一些 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 页面,但它失败了:(

有人能发现问题吗?

最佳答案

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

关于html - 在网站上实现 css 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30694714/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com