如何忽略表格首行样式？styled-components实现行hover效果排除首行

直接通过CSS伪类:not(:first-child)就能轻松实现需求，让首行跳过TR组件的红色背景和hover效果，具体代码如下：

import styled from 'styled-components';

const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
`;

const TH = styled.th`
  padding: 8px;
  border: 1px solid #ddd;
  // 可给首行表头单独设置样式，比如深灰背景
  background-color: #f5f5f5;
`;

const TD = styled.td`
  padding: 8px;
  border: 1px solid #ddd;
`;

const TR = styled.tr`
  // 仅给非首行设置红色背景
  &:not(:first-child) {
    background-color: red;
    // hover效果同样只作用于非首行
    &:hover {
      background-color: #EAEAEA;
    }
  }
`;

// 使用示例
function MyTable() {
  return (
    <Table>
      <TR>
        <TH>表头1</TH>
        <TH>表头2</TH>
      </TR>
      <TR>
        <TD>内容行1列1</TD>
        <TD>内容行1列2</TD>
      </TR>
      <TR>
        <TD>内容行2列1</TD>
        <TD>内容行2列2</TD>
      </TR>
    </Table>
  );
}

原理说明 #

• &:not(:first-child)是CSS否定伪类，会选中所有不是父元素第一个子元素的<tr>标签，也就是表格里从第二行开始的所有行。
• 把红色背景和hover效果都包裹在这个伪类里，就能确保首行完全不受这些样式影响，只保留你给表头设置的单独样式。

内容的提问来源于stack exchange，提问作者boogiehsows