• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  文章导航

                  CSS E:last-child

                  2018-11-12 11:16| 作者: admin| 查看: 569| 评论: 0|来自: 蚂蚁部落

                  E:last-child是伪类选择器,匹配父元素下处于最后一位,且类型为E的子元素。

                  被匹配的元素具有如下?#29238;?#29305;点:

                  (1).首先,被匹配元素是E类型。

                  (2).其次,必须是父元素的最后一个子元素。

                  特别说明:E并不仅表示元素选择器,?#37096;?#20197;是其他CSS选择器。

                  功能与E:last-of-type非常类似,区别就在于对于元素类型的限制。

                  具体内容参阅如下两篇文章:

                  (1).CSS E:last-of-type选择器一章节。

                  (2).E:last-of-type与E:last-child区别一章节。

                  语法结构:

                  [CSS] 纯文本查看 复制代码
                  E:last-child{ Rules}

                  参数解析:

                  (1).E:CSS选择器。

                  (2).Rules:CSS具体规则声明。

                  浏览器支持:

                  (1).IE9+浏览器支持此选择器。

                  (2).edge浏览器支持此选择器。

                  (3).谷歌浏览器支持此选择器。

                  (4).火狐浏览器支持此选择器。

                  (5).opera浏览器支持此选择器。

                  (6).safria浏览器支持此选择器。

                  代码实例:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  li:last-child{
                    color:blue;
                  }
                  </style>
                  </head>
                  <body>
                  <ul>
                    <li>蚂蚁部落一</li>
                    <li>蚂蚁部落二</li>
                    <li>蚂蚁部落三</li>
                    <li>蚂蚁部落四</li>
                  </ul>
                  </body>
                  </html>

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201811/12/111757yzoc42wz1wrow272.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  上述代码可以将ul下最后一个li元素字体颜色设置为蓝色。

                  被匹配元素需要满足如下?#29238;?#26465;件:

                  (1).首先,必须是li元素。

                  (2).其次,li元素必须是ul的最后一个子元素。

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  .a:last-child{
                    color:blue;
                  }
                  </style>
                  </head>
                  <body>
                  <ul>
                    <li class="a">蚂蚁部落一</li>
                    <li class="a">蚂蚁部落二</li>
                    <li class="a">蚂蚁部落三</li>
                    <li>蚂蚁部落四</li>
                  </ul>
                  </body>
                  </html>

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201811/12/111831zlbqzuvurlszvs8r.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  上面选择器匹配失败,代码分析如下:

                  (1).class选择器"a"匹配ul中的前三个li元素。

                  (2).但是,"a"所匹配的li元素中,都不是ul的最后一个子元素,所以匹配失败。

                  再来看一段代码实例加深理解,代码是如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset=" utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  span{display:block}
                  span:last-child{
                    color:blue;
                  }
                  </style>
                  </head>
                  <body>
                    <div id="box">
                      <span>蚂蚁部落一</span>
                      <span>蚂蚁部落二</span>
                      <div id="ant">
                        <span>蚂蚁部落三</span>
                        <div id="inner">
                          <span>蚂蚁部落四</span>
                        </div>
                      </div>
                    </div>
                  </body>
                  </html>

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201811/12/111908rbcfbzj9c8cc750g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  第四个span元素匹配成功,代码分析如下:

                  (1).box具有三个子元素,两个span与ant,span元素不是box的最后一个子元素,失败。

                  (2).ant具有两个子元素,一个span与ant,span同样不是ant的最后一个子元素,失败。

                  (3).inner具有一个子元素span,当然此span也是inner的最后一个子元素,成功。

                  下面是布局中常见的一个案例,代码如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  .box {
                    list-style: none;
                    width:400px;
                    margin: 0;
                    padding: 20px;
                    margin: 4rem auto;
                    background: #ccc;
                  }
                  .box li:not(:last-child){
                    border-bottom: 1px solid #000;
                    margin-bottom: .5rem;
                    padding-bottom: .5rem;
                  }
                  </style>
                  </head>
                  <body>
                    <ul class="box">
                      <li>本站的url地址是www.pecf.tw</li>
                      <li>珍惜今天的所有,因为此刻是你真正拥有</li>
                      <li>努力奋斗会使生活变的有意义</li>
                      <li>任?#20266;?#30721;高手主要是后面努力的结果</li>
                    </ul>
                  </body>
                  </html>

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201811/12/111941h6mmud2dywps0z16.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  文章列表通常需要用虚线或者实现对其进行分割,以提高辨识度。

                  但是最后一行并不需要分割线,否则会有一些丑陋。

                  那么可以通过利用li:not(:last-child)选择器可以将最后一行过?#35828;簟?/p>


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                                            群英会分布图至 波克城市诈金花 双色球红球复式投注常用速查表 21世纪心水论坛 新疆25选7开奖结果 体彩福建36选7第18094期 3d经典胆码公式 云南快乐10分下载 今日体彩p3正版藏机图 江苏十一选五开奖结果走势图任选走势图 秒速飞艇大小稳赢规律 捕鱼达人开发 黑龙江11选5前三直最大遗漏 贵州快三开奖号是多少钱 双色球基本走势图带坐标带连线