Question

结构是这样的（取自浏览器），它是在共享点Mysite中动态生成的。我无法控制HTML。我需要使用css隐藏整个tr。问题是页面中有许多类似的tr结构，但跨度中的文本不同。请建议一种方法只隐藏文本社交通知属性

<tr class = "ms-WPHeader">
<td colspan ="3">
<div class = "ms-WPTitle">
<span>
Text -Social Notification Properties

到目前为止，我已经尝试了这一点，但失败了。

td[class ~="ms-WPHeader"]+tr+td+div+span[Text ~="Newsfeed"]
{
 display:none;
 }

和这个

.ms-WPHeader ~ .ms-WPTitle.span[Text ~="Newsfeed"]
{
display:none;
}

使用它隐藏了显而易见的所有跨度

.ms-WPTitle span
{
display:none;
}

Answer 1

您可以使用:contains忽略CSS无法选择文本节点。

下面有两个表格，其中第二个表格文字可见。

＆＃13;

removeCombined: true

＆＃13;

$(".ms-WPHeader:contains('Text-Social Notification Properties')").css("display", "none");

＆＃13;

Answer 2

您无法通过CSS选择具有特定文本的元素。你可以做的是通过jQuery查找该元素然后添加一个类，以便您可以通过CSS选择它。

$("span:contains('Social Notification Properties')").addClass('hide');

然后在CSS中

.hide{
    display:none;
}

Answer 3

这是我仍然建议您可以像这样使用

$('table').addClass("hide_this_tr");

.hide_this_tr tr{
    display : none;
}

<table>
  <tr class="WPHeader">
    <td colspan="3">
      <div class="WPTitle">
        <span>Text-Social Notification Properties</span>
      </div>
    </td>
  </tr>
</table>

<table>
  <tr class="WPHeader">
    <td colspan="3">
      <div class="WPTitle">
        <span>I am visible though</span>
      </div>
    </td>
  </tr>
</table>

正如我对你想要实现的目标的理解，这就是我的尝试。

Answer 4

有:contains('')伪类的规范，但我无法在任何浏览器上使用它。

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#content-selectors

但是jQuery使这个选择器像Gustaf所说的那样工作：

$("span:contains('Social Notification Properties')");

这是目前实现这一目标的唯一途径。

Answer 5

不使用jQuery，使用XPath的普通JavaScript（如评论中所述）：

var snapshot = document.evaluate(
  "//tr[contains(concat(' ', normalize-space(@class), ' '), ' ms-WPHeader ')][contains(.//span, 'saurus')]",
  document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null
);
for (var i = 0; i < snapshot.snapshotLength; i++) {
  snapshot.snapshotItem(i).classList.add("highlight");
}

.highlight {
  color: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <table>
    <tr class = "ms-WPHeader">
      <td colspan ="3">
        <div class = "ms-WPTitle">
          <span>
            Irrelevant text
          </span>
        </div>
      </td>
    </tr>
    <tr class = "ms-WPHeader">
      <td colspan ="3">
        <div class = "ms-WPTitle">
          <span>
            A wild stegosaurus appears!
          </span>
        </div>
      </td>
    </tr>
    <tr class = "ms-WPHeader">
      <td colspan ="3">
        <div class = "ms-WPTitle">
          <span>
            More irrelevant text
          </span>
        </div>
      </td>
    </tr>
    <tr class = "wrongClass">
      <td colspan ="3">
        <div class = "wrongClassTitle">
          <span>
            Brontosaurus in a wrong TR
          </span>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

“有一个类”的XPath，简单的CSS，在XPath中有点痛苦;但如果你知道确切的类属性（即“除了ms-WPHeader之外没有其他类”，它可以简化很多）：

"//tr[@class='ms-WPHeader'][contains(.//span, 'saurus')]"

Answer 6

如果页面的结构未发生变化，您可以使用:nth-child()：

使用课程tr隐藏第一个ms-WPHeader（请注意：这会隐藏每个tr中的每个table}：

table tr.ms-WPHeader:nth-child(1) {//hide the 1st tr in table
    display: none;
}

JSFidlle：http://jsfiddle.net/ghorg12110/no891emk/

Answer 7

span是一个Web元素，因此您可以使用CSS Selector进行选择。然后可以执行WebElement.getText（）来检索文本。无需为此使用xpath。

如何使用CSS在div中选择带有文本的跨度？

7 个答案: