如何使用CSS3中的伪类选择器设置表格行间隔色

  • 原创
  • |
  • 浏览：503
  • |
  • 更新：
  • |
  • 标签：JAVASCRIPT 
  • 如何使用CSS3中的伪类选择器设置表格行间隔色1
  • 如何使用CSS3中的伪类选择器设置表格行间隔色2
  • 如何使用CSS3中的伪类选择器设置表格行间隔色3
  • 如何使用CSS3中的伪类选择器设置表格行间隔色4
  • 如何使用CSS3中的伪类选择器设置表格行间隔色5
  • 如何使用CSS3中的伪类选择器设置表格行间隔色6
  • 如何使用CSS3中的伪类选择器设置表格行间隔色7
分步阅读

在CSS3中，除了基本选择器之外，还有一类伪类选择器，如last-child、only-child、

nth-child等。那么，如果要设置表格行间隔色，该如何实现？

如何使用CSS3中的伪类选择器设置表格行间隔色

工具/原料

  • Windows7
  • HTML5
  • CSS3

方法/步骤

  1. 1

    第一，打开HBuilder开发工具，新建HTML5页面文件，然后插入一个table表格

    如何使用CSS3中的伪类选择器设置表格行间隔色
  2. 2

    第二，添加style标签，利用标签选择器，设置表格样式，如宽度、行高、边框等

    如何使用CSS3中的伪类选择器设置表格行间隔色
  3. 3

    第三，保存代码并打开浏览器预览，可以查看到表格样式，行没有间隔色

    如何使用CSS3中的伪类选择器设置表格行间隔色
  4. 4

    第四，利用nth-child伪类选择器，配合odd和even伪类选择器，设置表格奇数行和偶数行的背景色

    如何使用CSS3中的伪类选择器设置表格行间隔色
  5. 5

    第五，再次保存代码并刷新浏览器，可以看到表格主体行显示间隔色

    如何使用CSS3中的伪类选择器设置表格行间隔色
  6. 5
    本页面非法爬取自百度经验
  7. 6

    第六，除了使用odd和even之外，还可以使用2n和2n+1，设置奇数和偶数行背景色

    如何使用CSS3中的伪类选择器设置表格行间隔色
    END

注意事项

  • 注意CSS3中的伪类选择器的用法
  • 注意如何设置表格奇偶行间隔色
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。
展开阅读全部
相关标签JAVASCRIPT