CSS3：显示/隐藏基于节点的内容

可能重复：
CSS 3 content selector?CSS3：显示/隐藏基于节点的内容

我不能找到一种方法在网上隐藏或根据他们在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>元素添加属性会更好，但我不确定基于属性的解决方案是否支持复杂的规则，例如“第二个孩子不是'文件夹'，首先是'失败'”。

想法？

来源

2011-05-04 Clément

不支持CSS选择器。 XPath，我不确定。 – BoltClock 2011-05-04 19:31:13

我知道这可以很容易地用jQuery来完成。不与CSS。 – Dutchie432 2011-05-04 19:33:28

基于属性的解决方案？那是什么意思？你可以添加节点的文本作为属性（例如，''）？ – Ryan 2011-05-04 19:33:58

您可以使用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：不能原路返回。

编辑：

见丹后（下）的片的一种解释。两者的区别在于我从tr元素开始，并给它一个条件，它必须包含td和"File"，而Dan的解决方案以td元素开始，指定它必须包含"File"，然后将级别备份到tr。

此外，他还包含链接到great XPath test page。

来源

2011-05-04 19:51:55 theazureshadow

我对性能感到好奇，所以我创建了这个[jsPerf]（http://jsperf.com/xpath-element-with-second-child-containing-text）测试。看起来你的xpath速度更快，工作出色:) – 2011-05-04 20:03:43

@Dan：恩，那么我很幸运！（除了某些xslt以前，我很少使用XPath）。另外，您的测试链接很酷。 – theazureshadow 2011-05-04 20:38:33

我几乎从不使用xpath。我更喜欢jQuery之类的。我已经+1了你:) – 2011-05-04 20:46:12

-1

试试这个。你声明

我正在寻找一个CSS3规则，这将允许我隐藏其第二个子项包含文件的所有条目。

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

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

Working example

来源

2011-05-04 19:44:10 Jawad

@JAA149在一种情况下，第二个孩子没有File作为内容。 – jotapdiez 2011-05-04 19:49:59

你不能做这种假设。 – BoltClock 2011-05-04 19:53:55

更改您的标记。将标题属性的值为“文件”添加到每个以内容为文件并使用属性选择器的td，例如td [title =“file”] {display：none;} – Jawad 2011-05-04 20:04:12

CSS3：没有
的javascript：是
的XPath：是（类似//td[2][contains(text(),'File')]/..）

的XPath的工作原理是这样的：在文档中的任意位置

//td =选择TDS
[2] =限制他们那些老二
[contains(text(),'File')] =将它们限制为文本文件中的文件
.. = go up一个级别（至tr）

可以快速test your xpath here

来源

2011-05-04 19:50:48

+1：更好地解释XPath，以及更好的测试链接。 – theazureshadow 2011-05-04 20:39:19

谢谢你的解释！ – 2011-05-04 22:04:32

CSS3：显示/隐藏基于节点的内容

回答

相关问题