文章导航

CSS E:nth-last-of-type(n)

2019-1-11 15:16| 作者: admin| 查看: 154| 评论: 0|来自: 蚂蚁部落

当前,CSS算不上真正的编程语言,所以相对于真正的编程语言要简单很多。

尤其CSS选择器更是简单,无非是按照简单的规则匹配对应的元素。

如果勉强说哪几个选择器稍微有点难度,标题中的E:nth-last-of-type(n)算是一个,但与真正的编程语言横向比较起来是非常简单的,所以带着一颗轻松加愉快的心情学习此选择器可能效果会更好一些。

它是伪类选择器,可以匹配父元素下满足如下条件的子元素:

(1).首先,元素为E类型,E是选择器。

(2).其次,处于同标签类型(type)兄弟元素的倒数第n个。

特别说明:参数n并不仅仅是简单的数字,也可以是关键字或者表达式,后面会有详细的代码介绍。

语法结构:

[CSS] 纯文本查看 复制代码
E:nth-last-of-type(n){ 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.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
li:nth-last-of-type(1){
  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/201901/11/151742f3ih6wi23swh6s5s.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

选择器可以匹配li元素集合中的倒数第一个li,并将其字体颜色设置为蓝色。

首先分析一下选择器li:nth-last-of-type(1)的构成:

(1).首先,被匹配元素必须能够被li元素选择器所匹配。

(2).其次,被匹配元素必须是同标签类型。

(3).最后,被匹配元素必须位于通标签类型元素集合的倒数第一位。

(3).于是,最后一个li元素满足上述条件。

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/11/151810fhem43mppfl8f9xh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码没有匹配任何的li元素,代码分析如下:

(1).首先,被匹配元素必须被".ant"选择器所匹配。

(2).其次,被匹配元素,必须是同标签类型集合中的最后一个。

好多朋友可能会误认为第三个li元素字体应该为被设置为蓝色,其实并不会,它只满足第一个条件(被.ant选择器所匹配),但是它并不是li元素集合的倒数第一个,很明显它是倒数第二个。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
span{display:block}
.ant:nth-last-of-type(1){
  color:blue;
}
</style>
</head>
<body>
  <ul>
    <li class="ant">蚂蚁部落一</li>
    <span class="ant">蚂蚁部落二</span>
    <li class="ant">蚂蚁部落三</li>
    <span class="ant">蚂蚁部落四</span>
    <li>蚂蚁部落五</li>
    <li class="ant">蚂蚁部落六</li>
  </ul>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/11/151834wrxbtb0bbrj2uqk8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面这个代码更能展现此选择器的匹配原理,代码分析如下:

(1).首先,被匹配元素被选择器".ant"所匹配,具有此class属性值的span或者li被匹配。

(2).其次,被匹配元素必须位于同类型标签元素集合中的最后一位,那么第二个span位于span元素集合的最后一个,匹配成功,最后一个li元素自然位于li元素集合的最后一位,匹配成功。

前面几个代码实例,选择器的参数都是数字,其实参数也可以是关键字或者表达式,这也是此选择器功能强大的原因之一,先介绍参数是关键字的情况,代码实例如下:

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/11/151901mvc89ivooglgwgg6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此选择器具有两个关键字,odd(奇数)与even(偶数)。

上述代码可以匹配奇数行li元素,将其字体颜色设置为蓝色。

好多朋友会有这样的疑问,上面明明匹配的是偶数行li元素,不要忘记是倒数奇数行。

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

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/11/151930mcp5yqhcva59qiki.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

看到上面的运行效果,好像与前面的结论相反,其实并不然,一切都是符合原理的。

一定要记住是同标签类型元素集合中的奇数行,"蚂蚁部落五"和"蚂蚁部落一"所在的li元素都是li元素集合的奇数行。

上面演示了参数是关键字的使用,下面再介绍一下更为强大的表达式作为参数的应用,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
li:nth-last-of-type(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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/11/152004f1ixqssqp255ti98.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码中,选择器的参数是一个表达式,首先对表达式语法进行一下解析:

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

解析如下:

(1).a表示每次计数跨越兄弟元素的基础个数。

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

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

对代码中选择器li:nth-last-of-type(2n + 1)的匹配分析如下:

规定每次跨越兄弟元素基础个数是2,偏移量为1:

(1).2*0+1=1

(2).2*1+1=3

(3).2*2+1=5

(4).按照上面的规则继续推算。

又由于此选择器是倒数计数的,所以倒数第一个,倒数第三个和倒数第五个等li匹配成功。


鲜花

握手

雷人

路过

鸡蛋
上一篇:CSS E:nth-of-type(n)下一篇:CSS 基础语法

最新评论

返回顶部