Question

可能重复：
CSS 3 content selector?

我找不到在线隐藏或显示基于CSS内容的元素的方法。更具体地说，在以下示例中，我正在搜索CSS3规则，该规则允许我隐藏其第二个<tr>子项包含<td>的所有File个条目。

<tr>
    <td>Succeded</td>
    <td>File</td>
    <td>Create</td>
    <td>Left->Right</td>
    <td>\Thunderbird\00sqrcu5.default.archive.7z</td>
</tr>
<tr>
    <td>Succeded</td>
    <td>Folder</td>
    <td>Create</td>
    <td>Left->Right</td>
    <td>\Thunderbird\mab</td>
</tr>
<tr>
    <td>Failed</td>
    <td>File</td>
    <td>Create</td>
    <td>Left->Right</td>
    <td>\Thunderbird\mab\abook.mab</td>
</tr>

这甚至可能吗？我知道向<tr>元素添加属性会更好，但我不确定基于属性的解决方案是否支持复杂的规则，例如“第二个孩子不是'文件夹'，首先是'失败' “”。

想法？

Answer 1

CSS3：否
javascript：是
xpath：是（类似于//td[2][contains(text(),'File')]/..）

xpath的工作原理如下：

//td =在文档中的任意位置选择tds
[2] =将他们限制为第二个孩子
[contains(text(),'File')] =将其限制为文字中包含文件的人
.. =向上一级（到tr）

您可以快速test your xpath here

Answer 2

您可以使用XPath选择所有这些元素：

var headings = document.evaluate(
  "//tr[td[2][contains(text(),'File')]]",
  document,
  null,
  XPathResult.ANY_TYPE,
  null
);
while(a = headings.iterateNext()) { console.log(a); }

jsfiddle link

不是用css：不能回溯。

修改

请参阅Dan的帖子（如下）以获得有关作品的说明。两者之间的区别在于我从tr元素开始，并给它一个条件，它必须包含td "File"，而Dan的解决方案从td开始element，指定它必须包含"File"，然后将级别备份到tr。

此外，他还包含指向great XPath test page的链接。

Answer 3

试试这个。你声明了

我正在搜索CSS3规则，该规则允许我隐藏第二个子项包含File的所有条目。

所以我认为它总是第二个孩子

td:nth-child(2)
{
display: none;
}

Working example

CSS3：根据节点内容显示/隐藏

3 个答案: