• <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:nth-last-child(n)

                  2018-11-26 10:26| 作者: admin| 查看: 603| 评论: 0|来自: 蚂蚁部落

                  E:nth-last-child(n)是伪类选择器,可以匹配指定类型与位置的元素。

                  被匹配元素具有如下特点:

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

                  (2).其次,必须是父元素的倒数第n个子元素。

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

                  语法结构:

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

                  参数解析:

                  (1).E:CSS选择器。

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

                  此选择器具有三种类型参数:

                  (1).数字。

                  (2).关键字。

                  (3).表达式。

                  后面会通过代码实例详细演示各种类型参数的使用方式。

                  浏览器支持:

                  (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:nth-last-child(2){
                    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/26/102851ixhwx4h9cvno5hoq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  代码分析如下:

                  (1).E是元素选择器li,匹配到ul下所有li元素。

                  (2).然后在li元素集合中查找倒数第二个li元素,然后将其字体颜色设置为蓝色。

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

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201811/26/102923jlc9hzi622r6i2hl.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  没有任何文本被设置为蓝色,可见匹配失败,分析如下:

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

                  (2).其次,被匹配元素必须是父元素下倒数第二个子元素,然而倒数第二个是p元素,匹配失败。

                  [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:nth-last-child(2){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/26/102956swat16bzk9w8nbwk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  上述代码可以将第二个和第三个span元素字体颜色设置为蓝色。

                  代码分析如下:

                  (1).对于box元素,它具有三个子元素,分别是前两个span元素和ant元素,第二个span元素恰好是box元素的倒数第二个元素,所以匹配成功,将其字体颜色设置为蓝色。

                  (2).对于ant元素,它具有两个子元素,分别是span元素和inner元素,这个span元素恰好是ant元素的倒数第二个元素,所以匹配成功,于是其字体颜色?#19981;?#34987;设置为蓝色。

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

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201811/26/103029gf70iwppm2pif0w0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  选择器的参数还可以是关键字:

                  (1).odd匹配奇数行指定类型兄弟元素。

                  (2).even匹配偶数行指定类型兄弟元素。

                  需要注意的是,必须是倒数计算奇偶顺序,否则将得到完全相反的结果。

                  并且CSS与其他编程语言不同,位置是从1开始计数的,而不是0。

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

                  上述代码中,选择器参数是一个表达式,下面介绍一下规则。

                  语法结构描述如下:

                  [CSS] 纯文本查看 复制代码
                  E:nth-last-child(an+b)

                  解析如下:

                  (1).a表示?#30475;?#35745;数跨越兄弟元素的基础个数。

                  (2).n表示跨越的次数,从开始计数进行自增。

                  (3).b表示跨域的偏移量。

                  下面分析一下li:nth-last-child(2n + 1)选择器是如何运作的:

                  规定?#30475;?#36328;越兄弟元素基础个数是2,偏移量为1:

                  (1).2*0+1=1

                  (2).2*1+1=3

                  (3).2*2+1=5

                  以此类推,于是倒数第一、倒数第三、倒数第五和倒数第七的li元素字体颜色设置为蓝色。


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                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>

                                                            齐鲁福利彩票走势图 期期一尾中特平 香港单双中特 6场半全场万预测 福建十一选五彩票app 新浪彩票代购 六场半全场推荐 陕西快乐十分破解秘籍 北京单场胜负过关比分哪个网“ 东升彩票安徽快3玩法 河南十一选五前三走势 辽宁快乐12助手 225是什么码数 体彩山西11选5开奖查询结果 fm2019法甲头像包