如何将 nth-of-type 与 :before 一起使用并定位除最后一个元素之外的所有元素，或者最后一个元素以不同的方式定位

Question

我正在使用 css 技巧响应式 table (https://css-tricks.com/responsive-data-tables/)，但想知道如何摆脱移动视图的最后一个 td "before" 内容。

基本上对于这段代码，它在 td 中为响应式视图写入文本：

table td:nth-of-type(1)::before { content: "Expenses"; }
table td:nth-of-type(2)::before { content: "2015"; }
table td:nth-of-type(3)::before { content: "2016"; }

对于第一行（在单元格中写入 "Expenses"），除了最后一个单元格之外，我如何让所有单元格都发生这种情况？发生的事情是我的最后一个是这个 table 的 "totals" 行，所以我不需要将 "td content before" 写入最后一个 td（如果这有任何意义......我是还想知道我的 table 格式是否需要调整，或者我只需要以不同的方式处理 "totals" 行以及这些响应式 tables - [=37 上没有明确的示例=] 具有 "totals" 行的响应式 table 技巧。

我一直在尝试 last-child、nth-last-of-type 等，但没有成功。这是我尝试过的示例：

 table td:nth-last-of-type(1)::before { content: " "; }

但是，它不起作用。我读过你可以组合伪元素和伪元素 classes...我已经尝试过组合 :not also, display: none, 并试图改变 HTML,但没有运气。也许甚至写一个显示 none 和 jQuery 到最后一个 td 并添加一个 class 然后显示 none？我运行对此很感兴趣。

谁能帮帮我？

谢谢！

更新：这是一个 JSFiddle 显示：https://jsfiddle.net/gamehendgeVA/vh7bjscy/

Answer 1

如您所料，您应该可以使用

td:nth-last-child(1)::before {
    content: "";
}

或者，更简洁地说，

td:last-child::before {
    content: "";
}

这在 Chris Coyier 的演示中有效，该演示伴随着您链接的 post https://css-tricks.com/examples/ResponsiveTables/responsive.php（我在浏览器检查器中添加了样式，它们起作用了）。如果它不适合你，你一定引入了一些额外的冲突风格。例如，在两个 td table 中，table td:nth-child(2) {content: ...} 将覆盖 td:nth-child(last) {content: ...}

要标记该行 "total," 只需更改您使用的内容：

...
content: "Total";
...

Answer 2

如果我没有正确理解你的问题，你只是想删除 "total expenses" 行的最后一个描述符 "Expense"？为此，您必须首先专门针对最后一行，然后是第一个 td:

table tr:last-of-type td:nth-of-type(1)::before{content: "";}

table {border-collapse: collapse;width: 100%;color: #444;}
tr:nth-of-type(2n+1) {background: #eee none repeat scroll 0 0;}
th {background: #696969 none repeat scroll 0 0;color: #fff;font-weight: bold;}
td, th {border: 1px solid #ccc;padding: 6px;text-align: left; vertical-align: middle;}
/* responsive code */
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute; top: -9999px; left: -9999px;
    }
    tr { border: 1px solid #ccc; }
    td {
        /* Behave  like a "row" */
        border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%;
    }
    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;
    }
    /* Grants and Contracts table */
    table td:nth-of-type(1)::before { content: "Expense"; }
    table td:nth-of-type(2)::before { content: "2014"; }
    table td:nth-of-type(3)::before { content: "2015"; }
    table td:nth-of-type(4)::before { content: "2016"; }

    table tr:last-of-type td:nth-of-type(1)::before {content: "";}

<table id="expenses">
<thead>
<tr><th>Expense</th><th>2014</th><th>2015</th><th>2016</th></tr>
</thead>
<tbody>
<tr><td>Salaries</td><td>,256</td><td>,487</td><td>,626</td></tr>
<tr><td>Publication costs</td><td>22,698</td><td>69,548</td><td>66,555</td></tr>
<tr><td><strong>Total Expenses</strong></td><td><strong>6,061</strong></td><td><strong>9,013</strong></td><td><strong>,887</strong></td></tr>
</tbody>
</table>

正如评论中所讨论的那样，我个人更喜欢 different labeling 因为 table 它打破了通常的 ltr 阅读范式，但这当然取决于您的喜好。

您的 table 的 optimal/correct 格式（依我拙见）如下：

table {
    border-collapse: collapse;
    width: 100%;
    color: #444;
}
tr:nth-of-type(2n+1) {
    background: #eee none repeat scroll 0 0;
}
th {
    background: #696969 none repeat scroll 0 0;
    color: #fff;
    font-weight: bold;
}
th span{float:right}
td, th {
    border: 1px solid #ccc;
    padding: 6px;
    text-align: left;
    vertical-align: middle;
}
/* responsive code */
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }
    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }
    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
    /* Grants and Contracts table */
    table td:nth-of-type(1)::before { content: "2014"; }
    table td:nth-of-type(2)::before { content: "2015"; }
    table td:nth-of-type(3)::before { content: "2016"; }

<table id="expenses">
<thead>
<tr>
<th>Expense \ Year</th><th>2014</th><th>2015</th><th>2016</th>
</tr>
</thead>
<tbody>
<tr>
<th>Salaries</th><td>,256</td><td>,487</td><td>,626</td>
</tr>
<tr>
<th>Publication costs</th><td>22,698</td><td>69,548</td><td>66,555</td>
</tr>
<tr>
<th><strong>Total Expenses</strong></th><td><strong>6,061</strong></td><td><strong>9,013</strong></td><td><strong>,887</strong></td>
</tr>
</tbody>
</table>

如何将 nth-of-type 与 :before 一起使用并定位除最后一个元素之外的所有元素，或者最后一个元素以不同的方式定位

How to use nth-of-type with :before and targeting all but the last element, or the last element targeted differently

css

pseudo-class

pseudo-element

responsive-design