CSS中如何选取奇数和偶数?这是一个经常被问到的问题。其实,CSS提供了两种选择器来实现这个功能,分别是 :nth-child() 和 :nth-of-type()。/* 选取偶数行 */ tr:nt
CSS中如何选取奇数和偶数?这是一个经常被问到的问题。其实,CSS提供了两种选择器来实现这个功能,分别是 :nth-child() 和 :nth-of-type()。
/* 选取偶数行 */ tr:nth-child(even) { background-color: #CCC; } /* 选取奇数行 */ tr:nth-child(odd) { background-color: #FFF; } /* 选取偶数列 */ td:nth-child(even) { background-color: #CCC; } /* 选取奇数列 */ td:nth-child(odd) { background-color: #FFF; }
上面的代码中,:nth-child()选择器是根据子元素的位置来选择的,而:nth-of-type()选择器则是根据元素的类型来选择的。
需要注意的是,这些选择器只能应用于具有结构化标记的文档,比如表格、列表等。如果选择器应用于非结构化文本,如普通段落,则无效。
另外,使用这些选择器时需要确保目标元素的父元素的结构是稳定的,否则选择器可能会失效。
粉丝
0
关注
0
收藏
0