Question

＆＃13;

table {
    border-collapse: collapse;
    border : 1px solid #e2e2e2;
}
caption, th, td {
    text-align: left;
    line-height: 1.4;
    padding: 8px;
}
tr {
    border-bottom: 1px solid #ccc;
    vertical-align: top;
}

＆＃13;

<table>
    <caption>Optional table caption.</caption>
    <thead>
        <tr class="heade_class">
            <th>#</th>
            <th style="display:table-cell">First Name</th>
            <th style="display:table-cell">Last Name</th>
            <th style="display:none">Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td style="display:none">@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td style="display:none">@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td style="display:none">@twitter</td>
        </tr>
    </tbody>
</table>

＆＃13;

这里的代码只是示例，注意th和tr是用值动态设置的。

大家好我想选择最后一个具有风格＆＃34;显示：table-cell＆＃34;仅属性

现在我已经尝试过使用last-child了在这里，我可以得到所有的风格＆＃34;显示：table-cell＆＃34;仅属性，但在其中找不到最后一个

仅使用css

＆＃13;

   .heade_class th[style*="display: table-cell"]:last-child {
	
}

＆＃13;

Answer 1

简而言之，单靠CSS就无法做到这一点。

问题

首先，空间很重要。 th之后不能有空格，并且style属性必须与HTML中定义的样式完全相同。所以要使它有效，它应该如下：

.heade_class th[style*="display:table-cell"]

然而，由于last-child并不像你想象的那样工作，你仍然无法得到你想要的东西。为了使它匹配，它必须是最后一个子节点，而不仅仅是与你的其他规范匹配的最后一个元素。

所以如果你考虑这个：

.heade_class th[style*="display:table-cell"]:last-child

含义如下：

是th元素
style属性包含display:table-cell
这是最后一个子元素

为此，您会注意到所有元素都不符合所有三个条件，这就是它无法正常工作的原因。

其他选项

其他一些选择，但它们可能不是您想要的：

你可以按照以下方式尝试nth-last-child，但它依赖于你知道在它之后隐藏了多少元素，这可能不是你想要的：

.heade_class th[style*="display:table-cell"]:nth-last-child(2)

另一种方法是，根据您呈现HTML的方式，可以完全省略隐藏的内容，也可以将隐藏的内容更改为td。如果您将其更改为td，则可以使用last-of-type，如下所示：

.heade_class th:last-of-type

但在使用之前，您可能需要检查Envoyer docs。

选择具有某些样式属性的最后一个元素

1 个答案: