问答详情
源自:8-6 捡了一个儿子 - 子选择器

span为什么有嵌套?

<span>我还是一个<span>胆小如鼠</span>的小女孩</span>
这里为什么会嵌套?为什么是我还是一个胆小如鼠的小女孩框起来,而不是(我还是一个)(胆小如鼠)(的小女孩)

这里的嵌套span是什么意思?

<ul class="food">

    <li>水果

        <ul>

        <li>香蕉</li>

            <li>苹果</li>

            <li>梨</li>

        </ul>

定义的不是li加边框吗为啥是从ul开始边框?

提问者:慕少7352899 2019-08-15 09:54

个回答

  • sdarks
    2019-08-15 17:33:02

    <span>是开始标签,</span>是闭合标签,如果你想要实现(我还是一个)(胆小如鼠)(的小女孩)的话代码应为

    <span>我还是一个</span><span>胆小如鼠</span><span>的小女孩</span>

    当你在第一个<span>的后面再写一个<span>的话,除非你正确的在第一个<span>的后面写上一个</span>,不然第一个<span>会被认为是后面那个<span>的父元素。

    <span>我还是一个</span><span>胆小如鼠</span><span>的小女孩</span>
    //你需要的(我还是一个)(胆小如鼠)(的小女孩)
    <span>我还是一个<span>胆小如鼠<span>的小女孩</span></span></span>
    //{我还是一个[胆小如鼠(的小女孩)]}

    至于关于加边框的问题,这的确是li加边框啊

    .food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
    
    <li>水果
            <ul>
            <li>香蕉</li>
                <li>苹果</li>
                <li>梨</li>
            </ul>
    </li>

    因为.food>li{border:1px solid red;}是子选择器,所以它选择的是clss值为food的标签中第一代的li子元素。所以水果和蔬菜这两个li元素都被框起来了,而再接下去的香蕉、苹果、梨之类的li元素没被选中。

    PS:的确是li加边框不是ul加边框啊。

  • 一无所知的小黑华
    2019-08-15 10:41:24

    嵌套span是可以对字体“胆小如鼠”进行单独改变字体的样式。

    不知你的对ul进行样式,使用什么选择器?标签选择器?