关于div嵌套问题

最新推荐文章于 2024-01-11 08:50:52 发布

原创最新推荐文章于 2024-01-11 08:50:52 发布 · 置顶 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div嵌套

原生js选项卡或者轮播图专栏收录该内容

1 篇文章

订阅专栏

本文介绍了解决div标签过度嵌套导致的前端显示错误的方法，通过替换内部div为span标签，有效避免了div嵌套引发的选择器应用失败等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div嵌套问题解决

问题

<ul class='tab-title'>
    <li class='select></li>
    <li></li>
</ul>
<div class='tab-content'>
    <div class='select'>
        <div><!-- 此处属于div嵌套 -->
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div>
        <div><!-- 此处属于div嵌套 -->
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div>
        <div><!-- 此处属于div嵌套 -->
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</div>

解决

<ul class='tab-title'>
    <li class='select></li>
    <li></li>
</ul>
<div class='tab-content'>
    <div class='select'>
        <span><!-- 内部div换成其他标签即可，本例以span标签为例 -->
            <ul>
                <li></li>
                <li></li>
            </ul>
        </span>
    </div>
    <div>
        <span><!-- 内部div换成其他标签即可，本例以span标签为例 -->
            <ul>
                <li></li>
                <li></li>
            </ul>
        </span>
    </div>
    <div>
        <span><!-- 内部div换成其他标签即可，本例以span标签为例 -->
            <ul>
                <li></li>
                <li></li>
            </ul>
        </span>
    </div>
</div>