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

Posted 2023-03-06

【中文标题】CSS3：根据节点内容显示/隐藏

【英文标题】：CSS3: Show/Hide based on node contents [duplicate]

【发布时间】：2011-08-18 19:59:13

【问题描述】：

可能重复：CSS 3 content selector?

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

<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> 元素添加属性会更好，但我不确定基于属性的解决方案是否支持复杂规则，例如“第二个孩子不是'文件夹'，第一个是'失败'” .

想法？

【问题讨论】：

不适用于 CSS 选择器。 XPath，我不确定。

我知道这可以用 jQuery 轻松完成。不使用 CSS。

基于属性的解决方案？你到底是什么意思？能否将节点的文本添加为​​属性（例如<td t="File">）？

jQuery 解决方案here.

【参考方案1】：

CSS3：

否

javascript：

是的

xpath：

是

（类似于//td[2][contains(text(),'File')]/..）

xpath 的工作方式如下：

//td = 在文档中的任意位置选择 tds [2] = 仅限于第二个孩子 [contains(text(),'File')] = 仅限于文本中包含 File 的用户 .. = 上一级（到tr）

您可以快速test your xpath here

【讨论】：

+1：对 XPath 的更好解释，以及更好的测试链接。

【参考方案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元素开始，指定它必须包含@ 987654329@，然后将级别备份到tr。

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

【讨论】：

我对性能很好奇，所以我创建了这个jsPerf 测试。看来你的 xpath 更快，干得好 :)

@Dan：好吧，那我走运了！ （除了在一些 xslt 很久以前，我很少使用 XPath。）另外，你的测试链接很酷。

我几乎从不使用 xpath。我更喜欢jQuery之类的。我已经为你 +1 了 :)

AAaah，不确定现在接受哪个答案 :) 都很棒，都赞成 =)

【参考方案3】：

试试这个。你说的

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

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

td:nth-child(2)

display: none;

Working example

【讨论】：

@JAA149 在一种情况下，第二个孩子没有文件作为内容。

你不能做出那种假设。

更改您的标记。将值为“file”的标题属性添加到具有文件内容的每个 td 并使用属性选择器，例如 td[title="file"]display: none;

或者你可以试试这个 tr:first-child > td:nth-child(2) display: none; tr:last-child > td:nth-child(2) 显示：无； jsfiddle.net/XanUS/1

@JAA149：我认为你没有抓住重点，他想隐藏整个 tr （但前提是它的第二个孩子有“文件”）。