切记切记 “nth-child”选择的是父元素的子元素,这个子元素并没有指定确切类型,同时满足两个条件时,方能有效果:其一是子元素,其二是子元素刚好处在哪个位置上(也就是说所有子元素中位置为nth-child括号内指定的数字,且类型为nth-child前的元素类型生效,否则不生效);“nth-of-type”选择的是某父元素的子元素,...
div p:nth-child(2) 表达意思是: 选取div标签下第二个子元素,然后判断当前子元素是不是p标签,如果是,则样式作用到p标签上。否则,将不会作用上。 :nth-of-type, 则与之有些不同。 它是直接作用到子元素类型,然后判断它是第几个,如果满足,则生效。 例如: div p:nth-of-type(2) 表达意思是:选取div下...
如上面两个运行结果所示:p:nth-child(n)所指的是p元素所在父元素下的第n个元素(从上至下);当第n个元素正好是p元素时,背景设置才会生效。 畅享全文阅读体验
如果想让上面第二个生效的可以去除子元素的选择,写一个父元素加一个空格,以防止:nth-child不生效。 div :nth-child(2){ //div+空格,只根据父元素选择 color:red; } 我是第1个段落 我是第1个文本<!--符合条件--> 我是第2个段落 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 二、:nth-of-t...
你也可以填写0,不过下标为0的子元素是不存在的,所以匹配不上不会生效。这个和数组的概念不一样,数组中的下标是从零开始的。不过按照IT圈的尿性理论上应该还有两个“逆行”伪类与之对应才对。如果考虑到这点了,我就预先恭喜你在技术细节的积累上打了一个漂亮的“擦边球”,走了点捷径来提升效率。:nth-child(...
2019-12-16 14:36 −E:nth-child(n) 语法: E:nth-child(n) { sRules } 说明: 匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。大理石构件维修 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素 ... ...
2019-12-16 14:36 −E:nth-child(n) 语法: E:nth-child(n) { sRules } 说明: 匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。大理石构件维修 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素 ... ...
因为在body中自动创建了script标签,此时div的兄弟元素的最后一个元素是script元素,并不是div,所以:last-child选择器失效。此时如果删掉这个script标签。就会选择到最后一个div,设置的紫色背景也会生效: 那既然查了这么多了,不如就趁此机会复习一下很多人一直没搞清楚的几个css伪类选择器: ...
关注的是所有儿子中的整体排名(所要的儿子排在第几个) 比如:p:nth-child(1) 先找p的父元素,然后找父元素第 1 个子元素,要是第 1 个子元素是 p , 则所设置样式生效,反之所设置样式不生效。 总之使用:nth-child(n)的三部曲为: **先 找 父元素,然后 再找 父元素的第 n 个子元......
E:nth-of-type(n) 语法: E:nth-of-type(n) { sRules } 说明: 匹配同类型中的第n个同级兄弟元素E。深圳dd马达 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body 该选择符总是能命中 ...