CSS3::nth-child与:nth-of-type区别
来源:互联网 发布:手机wifi控制器软件 编辑:程序博客网 时间:2024/05/16 08:57
一、:nth-child
1.1 说明
:nth-child(n)选择器匹配属于其父元素的第N个子元素,不论元素的类型。n可以是数字、关键词或公式。
注意:如果第N个子元素与选择的元素类型不同则样式无效!
1.2 示例
<style>div>p:nth-child(2){ color:red;}</style><div> <p>我是第1个段落</p> <p>我是第2个段落</p><!--符合条件:1、是<p>元素,2、父元素<div>的第二个元素。这里被选择,会变成红色。--> <p>我是第3个段落</p></div><div> <p>我是第1个段落</p> <span>我是第1个文本</span><!--不符合条件:不是<p>元素,没有被选择--> <p>我是第2个段落</p></div>
二、:nth-of-type
2.1 说明
:nth-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素的每个元素。n可以是数字、关键词或公式。
2.2 示例
<style>div>p:nth-of-type(2){ color:red;}</style><div> <p>我是第1个段落</p> <p>我是第2个段落</p><!--符合条件:1、是特定元素类型<p>,2、是父元素<div>的第二个<p>元素。这里被选择,会变成红色--> <p>我是第3个段落</p></div><div> <p>我是第1个段落</p> <blockquote>第1个引用</blockquote> <p>我是第2个段落</p><!--符合条件:1、是特定元素类型<p>,2、是父元素<div>的第二个<p>元素。这里被选择,会变成红色--> <p>我是第3个段落</p></div>
CSS3::nth-child与:nth-of-type区别
阅读全文
0 0
- 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的区别
- CSS3之nth-child与nth-of-type
- :nth-child(n)与:nth-of-type(n)的区别
- :nth-child(n)与:nth-of-type(n)的区别
- nth-child和nth-of-type区别
- CSS3 :nth-child() ,nth-of-type(),nth-last-child() ,nth-last-of-type()
- CSS3—nth-child()和nth-of-type()
- css3之nth-child和nth-of-type
- css3中nth-child选择器和nth-of-type选择器的区别
- CSS3中:nth-child和:nth-of-type的区别深入理解
- CSS3中:nth-child和:nth-of-type的区别深入理解
- css选择器中:first-child与:first-of-type的区别///CSS3伪类nth-of-type(n)用法详解
- :nth-child 和 :nth-type-of 的区别
- [HNOI2004]L语言
- SpringBoot配置属性中文释义Security(六)
- 理解unix 系统I/O --csapp读书笔记
- mybatis 的延迟加载
- JVM调优系列:(三)类加载和执行机制
- CSS3::nth-child与:nth-of-type区别
- SpringBoot配置属性中文释义Migration(七)
- c++中的箭头运算符的含义
- REST接口设计
- SpringBoot配置属性中文释义Others(八)
- Qt之界面实现技巧
- 【二十】Docker-镜像操作
- 移动端+轮播+下拉式导航条
- P2P网络原理