说起伪类选器 CSS 的:nth-child(even)就是牛逼哄哄！它能找到父元素中的偶数孩子，瞬间让网页界面美出新高度。接下来就跟大家分享下怎么好好利用这个神奇的功能，让你的网页设计独具匠心！
在网页设计中，表格真的很有用，因为能用一眼看出所有内容。但是，如果学会了CSS的:nth-child(even)，那你就太棒了！只要轻轻一划，odd行和even行就能大变身！比如，我常会把even行的背景色调浅些，让表格看起来更美观，每个字也更加清晰，从而提升了表格的可读性！
父元素:nth-child(even) {
/* 样式属性 */
}
在做表格的时候，记得奇数行跟偶数行的字大小或者边框颜色要变化一下哟。这样一来看着舒服多了，咱们查看内容也方便！
2.列表的交替颜色
table tr:nth-child(even) {
background-color: #f2f2f2;
}
看表格累不爽？试试CSS的伪类nth-child（even），给你的长列表加点颜色。不管多长的列表都不再让你眼花缭乱，整页都会变得清新美观！
把清单里的偶数项涂上个浅灰色背景，这样它们会特别显眼，整个列表看上去也整齐很多。这么做的话，每个项目都一目了然，整个清单都显得井井有条！
3.广告轮播图的样式
ul li:nth-child(even) {
background-color: #f2f2f2;
}
广告太多看不过来？别急，试试nth-child（even）这个神奇伪类！给每个段落中偶数行的广告加点个性，就会更突出~
咱们就在轮播图上搞第二、四、六的广告位，字号调大点儿还得红彤彤的，这样大家一看就知道了，广告也醒目多了。这个设计又好看又实在，保证人人看得明明白白！
4.网页菜单样式
.carousel li:nth-child(even) {
font-weight: bold;
color: red;
}
菜单要做的好看又好用！想要更加吸引人，还要考虑用户使用是否方便对？所以试试给菜单中的偶数行加点装饰，比如说用伪类选择器 nth-child(even)添个特殊样式。这么一弄，菜单看起来就会生动多！
比方说，咱们把菜单栏里标号为2、4、6的那几项改成浅灰底色加右下划线。虽然有点不一样了，但是看着还是挺顺眼的。这样子用户一眼就知道这几个选项是干嘛用的，找起东西来也容易多！
快学这个简便CSS技能吧：使用“nth-child(even)”，懂了立刻上手！这样一来，你的网站就能变得更炫酷，提升用户体验不是问题！希望这篇小贴士对你有帮助，加油成为前端大神！
ul.menu li:nth-child(even) {
background-color: #f2f2f2;
border-right: 1px solid #ccc;
}
评论0