选择中的:nth-child(n)和:nth-of-type(n)的区别
来源:互联网 发布:天尚网络机顶盒刷机 编辑:程序博客网 时间:2024/06/05 16:06
w3c官方是这样解释的:
:nth-child(n) 例 p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素。
:nth-of-type(n) 例 p:nth-of-type(2) 选择属于其父元素第二个<p>元素的每个<p>元素。
<div> <h2>h元素</h2> <p class="nav_after">p元素</p> <h2>h元素</h2> <p class="nav_after">p元素</p> <h2>h元素</h2> <p class="nav_after">p元素</p> <h2>h元素</h2> <p class="nav_after">p元素</p></div>
.nav_after:nth-child(4)的意思是:.nav_after的父元素(这里就是ul)的第四个子元素如果是.nav_after的时候适用。
代码中,第四个子元素恰好含有类名.nav_after,所以设置背景有效;当你写成单数时,由于单数的li并没有设置.nav_after类名,所以没有效果。
nth-of-type适用于:当子元素的类型超过一种的时候,针对同类型的子元素计算。如下代码,div包含h2型子元素和p型子元素。
.nav_after:nth-of-type(4)就表示第四个p。
如果把h2也都加上类名.nav_after,那么.nav_after:nth-of-type(4)就表示第四个h2和第四个p了。
.nav_after:nth-child(4)表示父元素的第四个子元素,不分类型,如果第四个子元素含有类名.nav_after就有效,不含就没效。
0 0
- 选择中的:nth-child(n)和:nth-of-type(n)的区别
- css nth-child(n)和nth-of-type(n)区别
- :nth-child(n)与:nth-of-type(n)的区别
- :nth-child(n)与:nth-of-type(n)的区别
- nth-child(n)和nth-of-type(n)的区分
- css中的first-child nth-child nth-last-child() 和:nth-of-type(n)
- nth-type-of nth-child(n) eq(n)区别
- css 伪类选择器 :nth-child(n) 与:nth-of-type(n)的区别
- nth-child和nth-of-type区别
- :nth-child 和 :nth-type-of 的区别
- :nth-child 和 :nth-type-of 的区别
- CSS3中:nth-child和:nth-of-type的区别
- CSS3中: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-child和:nth-of-type的区别
- 坐标详解之ScrollTo和ScrollBy<一>
- 小白的python笔记
- 浏览器自动化工具-Selenium
- JAVA_OPTS配置实例
- 【PHP】你知道在PHP中的GetType和SetType的区别吗?
- 选择中的:nth-child(n)和:nth-of-type(n)的区别
- 一些简单操作
- sql注入小解,以及statement和preparedStatement的理解和区别
- Xshell挂载Kali虚拟机
- 127.0.0.1和localhost.本机Ip三者区别
- 数据库基础
- Android四大组件之二:Service总结
- fragmentTransaction 事务只能执行一次
- 看到自己的进步