【问题标题】:how to select even rows and exclude last column如何选择偶数行并排除最后一列
【发布时间】:2019-08-02 00:27:23
【问题描述】:

我想为我的 html 表格添加一些样式,但无法在 css 中进行特定选择,我想选择每个偶数行,除了每个行的最后一列! 我已经知道如何选择每个偶数行:“:nth-​​child(偶数)”,但我不能让它排除最后一列!

                <tr>
                    <td>1</td>
                    <td>name</td>
                    <td>age</td>
                    <td>country</td>
                    <td id="rmv"><button>remove</button></td>
                </tr>

【问题讨论】:

  • :nth-child(even):not(:last-child) ?
  • @TemaniAfif 不,这使它排除了整个最后一行!我只需要从每个偶数行中排除最后一列
  • 选择并排除?你能说得清楚点吗,对我来说没有意义
  • tr:last-child:{} 现在只是覆盖范围内。
  • 你添加一个空格然后:nth-child(even) :not(:last-child)

标签: html css


【解决方案1】:

您可以定位与tr:nth-child(even)偶数相同的tr元素,然后排除最后一个tdtd:not(:last-child),选择器变为tr:nth-child(even) td:not(:last-child)

tr:nth-child(even) td:not(:last-child) {
  background-color: #f00;
}


/** only for demo purposes **/

table,
tr,
td {
  border: 1px solid #000;
}

td {
  padding: 8px;
}
<table>
  <tr>
    <td>1</td>
    <td>name</td>
    <td>age</td>
    <td>country</td>
    <td id="rmv"><button>remove</button></td>
  </tr>
  <tr>
    <td>1</td>
    <td>name</td>
    <td>age</td>
    <td>country</td>
    <td id="rmv"><button>remove</button></td>
  </tr>
  <tr>
    <td>1</td>
    <td>name</td>
    <td>age</td>
    <td>country</td>
    <td id="rmv"><button>remove</button></td>
  </tr>
  <tr>
    <td>1</td>
    <td>name</td>
    <td>age</td>
    <td>country</td>
    <td id="rmv"><button>remove</button></td>
  </tr>
</table>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-01-07
    • 2016-07-14
    • 2015-01-23
    • 1970-01-01
    • 1970-01-01
    • 2017-11-22
    • 2019-11-22
    相关资源
    最近更新 更多