h1:nth-of-type(2) { background: pink; } 总结思考 通过这个例子更加加深了我对css选择器的理解。目前css2和css3css类似的选择器确实只支持元素标签,不支持类名ID,据了解css4会增加一个ntn-match(),会支持上述的类名ID选择兄弟节点的功能。 参考文献 MDN:nth-of-type :nth-of-type()不
<!DOCTYPE html> Document .test:nth-of-type(1) { background: pink; } 123 123 123 123 实在是想不出为什么没有会选不中,Why? 我的理解是:h1.test标签的父元素下的第一个有.test类的元素。css 有用2关注6收藏1 回复 阅读13.8k 6 个回答 得票最新 查看全部 6 个回答 推荐问题 b...
CSS 伪类:nth-of-type(an+b) 匹配在文档树中前面有an+b-1个相同标签名兄弟元素的元素,此时n大于或等于0,并且该元素具有父元素。参见 :nth-child关于伪元素参数语法详细的说明. 如果你想在不受同胞异类元素和父元素影响保证自己选择相同类型得元素,这个伪元素更加灵活实用. .test:nth-of-type(1)意思是在当前...
CSS :nth-of-type() bug .tools-hover-box-list-item{pointer-events: auto;box-sizing: border-box;display: flex;flex-flow: row nowrap;justify-content: flex-start;align-items: flex-start;width:140px;margin-top:14px; &:nth-of-type(4n +1) {margin-top:20px; } // &:nth-of-type(1+4...
CSS :nth-of-type() bug CSS :nth-of-type() bug .tools-hover-box-list-item{ pointer-events:auto; box-sizing:border-box; display:flex; flex-flow:rownowrap; justify-content:flex-start; align-items:flex-start; width:140px; margin-top:14px; ...
nth-of-type选择器主要用于选取特定类型的子元素，且该子元素在同级同类元素中的位置符合指定的规律。
nth-child:选择父元素的第n个子元素,不考虑子元素的类型。如果第n个子元素不是指定的类型,选择器将不会生效。 nth-of-type:选择父元素中特定类型的第n个子元素,忽略其他类型的子元素。 3.1 示例对比 为了更好地理解两者的区别,我们来看一个更复杂的例子: ...
}/* 正确的类型敏感选择 */sectionp:nth-child(4) {color: green;/* 生效 */} AI代码助手复制代码 五、性能优化建议 尽量使用nth-child:当不需要区分元素类型时性能更优 避免过度组合:如div.class:nth-of-type(3n+1)会增加计算负担 合理限制范围:优先在已知结构的容器内使用 ...
CSS3 :nth-of-type() Selector 完整CSS选择器参考手册 实例 指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色: p:nth-of-type(2) { background:#ff0000; } 尝试一下 » 定义和用法 :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。