觉得"胆小如鼠"中“小如”两个字应该不是红色的,只有“胆”和“鼠”应该是红色的,不太理解

来源:8-7 这么快就当爷爷了? - 后代选择器

慕容逍遥

2016-11-06 13:46

CSS:

.first>span{color:red;

border:1px solid red;}

HTML:

 <p class="first">三年级时,我还是一个<span>胆<span>小如</span>鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

写回答 关注

7回答

  • MakeA_Pile
    2017-01-16 14:14:14

    主要纠结的是为什么<span>标签的第二代变红了但是<li>标签的第二代没有每个都加框吗?按我理解,“小如”是第一代<span>内的内容,所以字体颜色为第一代的红色;<li>第二代也是第一代<li>内的内容,因此它们同在第一代的红框内,而不是自身有红框。

  • sherryliu
    2016-12-23 23:52:11

    下面两个例子都采用子选择器,样式都为红色字体,加边框。

    <span>胆<span>小如</span>鼠</span>

    从左向右我把标签计作1、2、3、4,

    我个人认为1和4默认是一对,2和3默认是一对,所以第一代应该是1和4之间的内容,包括在里边的所有内容(尽管里边有第二代)都被设置了样式,显示结果为红色字体,边框圈4个字最外层,因为2和3是第二代,所以小如两个字外边不圈边框,至于小如两个字为什么变红而不是不变,我认为小如两个字是第一代和第二代共有部分,因为第一代对其进行了设置,所以它是红色。

    回到课程中,

    <li>水果
            <ul>
                <li>香蕉</li>
                <li>苹果</li>
                <li>梨</li>
            </ul>
        </li>

    第一个<li>和最后</li>是第一代,包括在里边的所有内容(尽管里边有第二代),也同样被设置了样式。,结果显示如上面分析的那样,圈最外边大框,字体全部变红(因为字体是共有部分)。当使用后代选择器时,显示外框套内框,字体全红。

    如果猜错的话,求大神更正。

  • qq_痞子绅士_1
    2016-11-23 21:30:54

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>后代选择器</title>

    <style type="text/css">

    .first>span>span{color:red;}


    .food>li>ul>li{

        border:1px solid red;color:red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/

    }

    </style>

    </head>

    <body>

     <p class="first">三年级时,<span>我还是一个<span>胆小如鼠</span>的小女孩</span>,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

    <!--下面是本小节任务代码-->

    <ul class="food">

        <li>水果

            <ul>

            <li>香蕉</li>

                <li>苹果</li>

                <li>梨</li>

            </ul>

        </li>

        <li>蔬菜

        <ul>

            <li>白菜</li>

                <li>油菜</li>

                <li>卷心菜</li>

            </ul>

        </li>

    </ul>


    </body>

    </html>

    哥们你用我的代码试一下  你就全明白了 ,很简单的,说我也说不太清楚,我就直接放代码吧

  • 34416912
    2016-11-23 10:37:06

    按你的思路, 第一代第二代. 那第一代就是第二代的父元素,第二代是第一代的子元素,它们是父子关系,假如在这段话中其它地方出现span, 那么它和第一代就应该是兄弟关系. 父元素与子元素应该是包含关系,也就是说子元素有的,父元素也有. 那么第一代子元素中包含的内容应该是"胆小如鼠",第二代子元素中的是"小如". 兄弟关系最好的体现就是你可以在文本的其它地方加个span标签, 看看它会不会像这个嵌套一样变色.

    你回复的评论说第二组加边框的明白...那它和第一组这个"胆小如鼠"有什么区别吗? 第二组不就是两个ul-li嵌套么? <li>水果</li>是第一代子元素,<li>香蕉苹果梨</li>是第二代.按你说的,边框应该只加在水果这两个字上就可以了啊,为什么它把香蕉苹果梨都圈起来了?  如果你觉得看第二组能看明白,你把格式设置换一下, 第二组用颜色, 你看看是不是所有的字都变成红色.

    感觉你这个问题就是给自己刨了个坑儿,然后跳里出不来了.

  • 落世
    2016-11-06 14:41:21

    第一:border:1px solid red;}这个代码是加上红色框框的,不是改字体颜色的,字体颜色是colr:red。

    第二:<span></span>之间的内容都会被改变,不用在小如这里加上<span></span>

    落世 回复慕容逍遥

    小如不是二代子元素。原题是 <ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul> <ul></ul>是一代元素,<li> </li>里面才是二代元素,

    2016-11-06 15:26:14

    共 3 条回复 >

  • 老友丶
    2016-11-06 14:32:27

    以为字体颜色在没有设置的情况下会继承父辈的字体颜色啊(a标签除外),所以“小如”也会变为红色

    慕容逍遥 回复慕容逍遥

    发现字号也是默认继承父辈的

    2016-11-06 15:00:21

    共 2 条回复 >

  • 慕粉4299462
    2016-11-06 13:50:49

    找最近的配对

    慕容逍遥

    .first>span这里是>,应该只用于第一代子元素,“小如”两个字是第二代了吧,为什么还是变红了

    2016-11-06 13:53:11

    共 1 条回复 >

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225813 学习 · 18234 问题

查看课程

相似问题