CSS3选择器之学习笔记 android软件开发教程

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 15:53 我要评论(0)

本文章来给大家介绍关于我自己学习使用的CSS3选择器了,这里包括大概有:first-child选择器,last-child选择器,nth-child选择器,nth-last-child选择器,nth-of-type选择器与nth-last-of-type选择器,这里简单介绍一下有需要了解的朋友可参考

首先说first-child与last-child,这两个选择器很容易明白,就是父元素下的第一个子元素和最后一个子元素。而nth-child和nth-last-child则是父元素下指定序号的子元素,甚至第偶数个、奇数个子元素精选样式的制定。

/*选择器写法示例*/

nth-child(n) //正数第n个子元素

nth-last-child(n) //倒数第n个子元素

nth-child(odd) //正数下来所有的第偶数个子元素

nth-last-child(even) //倒数上去的第奇数个子元素

那么nth-of-type与nth-last-of-type呢?

在一个div中有数篇文章,h2与p多次使用的情况要对h2实现奇偶异色,如果使用nth-child或是nth-last-child来实现就会发现一些问题(不提供demo代码,读者可自行编写h2ph2ph2p如此),试验的结果是没有出现奇偶异色,仅仅是奇数的变色了。

这个问题产生的原因是,nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候,是连同父元素中的所有子元素一起计算的。换句话说,”h2:nth-child(odd)”这句话的含义,并不是指“针对div元素中第奇数个h2子元素来使用”,而是指“当div元素中的第奇数个子元素是h2子元素的时候使用。”(demo的话h2,p相互交错,h2都在奇数位置。)

nth-of-type与nth-last-of-type可以避免这类问题的发生。使用这两个选择器的时候,CSS3在计算子元素是第奇数个子元素还是第偶数个子元素的时候,就只针对同类型的子元素进行计算了。

/*选择器写法示例*/

h2:nth-of-type(odd) //第偶数个h2子元素

h2:nth-of-type(even) //第奇数个h2子元素

新增结构伪类选择器列表:

E:root:匹配E所在文档的根元素

E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素

E:nth-last-child(n):匹配元素类型为E且是父元素的倒数第n个子元素(与上一项顺序相反)

E:nth-of-type(n):匹配父元素的第n个类型为E的子元素

E:nth-last-of-type(n):匹配父元素的倒数第n个类型为E的子元素(与上一项顺序相反)

E:first-of-type:匹配父元素的第一个类型为E的子元素

E:last-child:匹配元素类型为E且是父元素的最后一个子元素

E:last-of-type:匹配父元素的最后一个类型为E的子元素

E:only-child:匹配元素类型为E且是父元素中唯一的子元素

E:only-of-type:匹配父元素中唯一子元素是E的子元素

E:empty:匹配不包含子节点(包括文本)的E元素

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...