问答详情
源自:6-6 CSS3 结构性伪类选择器—first-child

:first-child的真正含义?

ul > li 选择了ul下的所有li元素,而ul > li:first-child 只选择了ul下的第一个li元素,是这样理解吗?还是ul下的li的第一个子元素?

提问者:weibo_诸小呆_0 2016-04-25 16:15

个回答

  • 东城子夜
    2016-04-25 16:44:44
    已采纳

    ul > li 选择了ul下的所有li元素,而ul > li:first-child 只选择了ul下的第一个li元素,你可以亲自写一下试试就明白了

  • 慕移动9181930
    2022-03-25 13:22:45

    程序是一行行的读?先从这个函数这里入口setTimeout('startMove()',3000);调用startMove()函数headerPHP5.45.4使MySQL^_^...

  • 东城子夜
    2016-04-27 19:11:24


    <style type="text/css">
      ul>li{
     color:red;
     
    }


    div>p
    {
    color:red;
    }
    </style>


    <ul>
        <li>运动:
            <ul>
              <li>篮球</li>


              <li>游泳</li>
             </ul>


        </li>
        <li>水果:
            <ul>
                <li>草莓</li>


                <li>香蕉</li> 
            </ul>
        </li>
            <li>
                没有了
            </li>
     
    <!--   //上面没啥说的 -->
     
      <!-- //问题在这里:是不是比较奇葩,按理说他是不应该被改变的。那你就错了,不要小看html中的每一个标签,有些嵌套规则(行内/块级)是需要遵循的,新手容易忽略这一点。ul里面放其他标签,不光不符合语义,在有些浏览器里面会有问题。
    此处:如果li前面有其他标签,浏览器会认为其他元素为li的子节点 -->
     
        <p><li>我的爱好:xxxxxxxxx</li></p>


     
    <!--   //这里就能说明了,不过好像意义不大,不符合规范
     -->
         <div><li>ssssss</li></div>
     
      <!-- //同样这里嵌套有问题,只是举个栗子 -->
      <span><li>dddddddd</li></span>
      <strong><li>dddd</li></strong>
      <em><li>ccccc</li></em>


    </ul>


    <!-- //这里有个正确栗子,希望给你启发 -->
    <div>
    <span><p>我是jenes</p></span>
    <p>我住在火星</p>
    </div>


    <p>我最好的朋友是css</p>


    <div>
    <span><p>我的样式不会改变。</p></span>
    </div>


    <!-- 纸上得来终觉浅,绝知此事要躬行,加油!!!  -->




  • weibo_诸小呆_0
    2016-04-25 17:29:29

    <ul>

        <p>我的爱好:</p>

        <li>运动:

            <li>篮球</li>

            <li>游泳</li>

        </li>

        <li>水果:

            <p>包括:</p>

            <ul>

                <li>草莓</li>

                <li>香蕉</li>  

            </ul>

        </li>

        <P>

            其他:

            <li>

                没有了

            </li>

        </P>

    </ul>

    这段代码,css为:

    ul > li{

     color: red;

    }

    可以试一下吗?好像所有的li都被选择了。