css3 :nth-child和:nth-of-type的区别
来源:互联网 发布:ubuntu谷歌拼音输入法 编辑:程序博客网 时间:2024/05/17 17:59
css3 :nth-child
和:nth-of-type
的区别
对于初学者和平时工作应用中,区别nth-child
和nth-of-type
是一个很大的盲区,为了更好帮助大家区分两者使用方法,特在此加以区分。
首先创建一个HTML结构
<div class='parent'> <p>我说文章的第一个段落</p> <p>我说文章的第二个段落</p></div>
接下来使用nth-child
和nth-of-type
选择段落并改变其文字颜色
.parent>p:nth-child(2){ background-color: red;}.parent>p:nth-of-type(2){ color: pink;}
上面的代码都把
.parent
中的第二段文字字体变为粉色、背景为红色。虽然都能选中同一个元素。但是有区别的。:nth-child
仅从字面上来解释,其实包含了两层意思。首先是一个段落元素,而且这个段落是父元素“div”的第二个子元素;而:nth-of-type
从字面上解释是“选择父元素div的段落二”。
上面一段话看起来是不是很晕,有没有更好方法来区分它们呢? 有的!把上面的HTML结构改变一下,在段落前加一个标题“h1”。
<div class='parent'> <h1>我是标题</h1> <p>我说文章的第一个段落</p> <p>我说文章的第二个段落</p></div>
前面的样式不变,但结构却完全不同了。“p:nth-child(2)”并没有选择段落二,而是选择了段落一,从而没有达到需要的效果。第一个段落变为红色,第二个段落字体变为粉色。
如果在“h1”标题后面添加一个“h2”标题,此时“p:nth-child(2)”将无法选择任何元素,因为,此时“div”的第二个元素并不是段落一“p”,所以无法选择任何元素。但“p:nth-of-type(2)”仍然能正常工作,因为选择的始终是“div”中第二个段落“p”。
大家只需记住一点:“nth-child”选择的是父元素的子元素,这个子元素并没有指定确切类型,同时满足两个条件时方能有效果:其一是子元素,其二是子元素刚好处在那个位置;“nth-of-type”选择的是某父元素的子元素,而且这个子元素是指定类型。
阅读全文
0 0
- CSS3中:nth-child和:nth-of-type的区别
- CSS3中:nth-child和:nth-of-type的区别
- css3 :nth-child和:nth-of-type的区别
- nth-child和nth-of-type区别
- css3中nth-child选择器和nth-of-type选择器的区别
- CSS3中:nth-child和:nth-of-type的区别深入理解
- CSS3中:nth-child和:nth-of-type的区别深入理解
- :nth-child 和 :nth-type-of 的区别
- :nth-child 和 :nth-type-of 的区别
- :nth-child和:nth-of-type的区别
- 关于:nth-child和:nth-of-type的区别
- :nth-child和:nth-of-type的区别
- nth-child和nth-of-type的区别
- :nth-child和:nth-of-type的区别
- nth-of-type和nth-child的区别
- nth-of-type和nth-child的区别
- css :nth-child和:nth-of-type的区别
- CSS3::nth-child与:nth-of-type区别
- VIM中正则的非贪婪匹配
- 剑指offer——53.表示数值的字符串
- 1).单例模式的七种写法
- C语言 删除多个相同元素
- Python字符串和编码
- css3 :nth-child和:nth-of-type的区别
- 2017校招真题在线编程 异或
- 第三周 项目4-顺序表应用 (2)
- Doctype作用?严格模式与混杂模式如何区分?它们有何差异?
- 游戏BI数据统计分析相关
- Python自动化(六)使用xlwt操作Excel
- 《C编码实践篇》实验二——命令行菜单小程序的实现
- 全景图像展开
- mongodb 添加用户名密码验证