css - 使用 :content pseudo-element to change non-first <thead> <th> element content

我仍然每天都在学习更多关于 CSS 的知识，并且继续对它的可能性感到惊讶。例如，我刚刚了解了 first-child 伪元素 - 不知道你可以做到这一点!因此，因为我仍然感到惊讶，我想我会在这里问是否有办法实现我所追求的目标，即使我找不到解决方案。

我想更改显示在非第一页上的表格中元素的内容。换句话说，当表格打开新页面并再次呈现时，我想将内容(“Cont...”)附加到标题单元格。

我给出了一个非常简单的示例，当您在浏览器中打印预览时，将生成两个页面，每个页面有两行。在第二页上，我想使用 CSS 来更改元素的内容。

有人有什么想法吗？我必须使用 CSS 执行此操作，我无法更改主 html，我只能更改样式。

<html>
<head>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>
                    Column 1
                </th>
                <th>
                    Column 2
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
            </tr>
            <tr style="page-break-after:always;">
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
            </tr>
            <tr>
                <td>Row 3, Column 1</td>
                <td>Row 3, Column 2</td>
            </tr>
            <tr>
                <td>Row 4, Column 1</td>
                <td>Row 4, Column 2</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

最佳答案

您可以使用 :nth-child 伪元素。

http://css-tricks.com/5452-how-nth-child-works/

您可以使用 :nth-child() 或 :nth-of-type() 仅针对特定行。我不确定 :nth-child 虽然可以处理一个范围，所以你可能不得不像这样烦人地链接你的 css:

:nth-child(3), :nth-child(4), :nth-child(eleventy!!1!) {properties}

现在，当然 - 如果您使用的是 Sass或 Compass - 这种链接很简单。检查这两个元素。

关于css - 使用 :content pseudo-element to change non-first <thead> <th> element content，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6460293/

css - 使用 :content pseudo-element to change non-first <thead> <th> element content

上一篇：html - 容器 div 内的多个 div

下一篇：css - Print.css 媒体没有完全工作