HTML同类型元素选择器nth-of-type实现表格隔行换色

向右看齐 2022-12-22 15:23 16阅读 0赞 
  1. <style type="text/css">
  2.     table tr:nth-of-type(odd) {
  3.         background: deepskyblue;
  4.     }
  6.     table tr:nth-of-type(even) {
  7.         background: skyblue;
  8.     }
  9. </style>

注意：
① nth-child为非同类型元素选择器，执行能力强但容易发生混选(当往之前的元素间再插入其他元素时选择顺序会被打乱)。

② nth-of-type为同类型元素选择器，相比非同类型其分辨能力更强，推荐使用。

③ odd 和 2n + 1表示选中奇数行，even 和 2n表示选中偶数行。
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读