【css】nth-child选择器实现表格的斑马纹效果

nth-child() 选择器可以实现为所有偶数(或奇数)的表格行添加css样式,even:偶数,odd:奇数。

代码:

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: center;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}//基数偶数子元素选择器
style>
head>
<body>

<table>
  <tr>
    <th>Firstnameth>
    <th>Lastnameth>
    <th>Savingsth>
  tr>
  <tr>
    <td>Billtd>
    <td>Gatestd>
    <td>$100td>
  tr>
  <tr>
    <td>Stevetd>
    <td>Jobstd>
    <td>$150td>
  tr>
  <tr>
    <td>Elontd>
    <td>Musktd>
    <td>$300td>
  tr>
  <tr>
    <td>Marktd>
    <td>Zuckerbergtd>
    <td>$250td>
  tr>
table>

body>

渲染效果:
【css】nth-child选择器实现表格的斑马纹效果_第1张图片

你可能感兴趣的:(前端,css,前端)