如何使用 CSS select div 中带有文本的跨度？

Question

结构是这样的（取自浏览器），在分享点Mysite中动态生成。我无法控制 HTML。我需要使用 css 隐藏整个 tr。问题是页面中有许多相似的 tr 结构，但在 span.Please 中有不同的文本建议一种仅隐藏带有文本 Social Notification Properties[=17= 的 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

如果您的页面结构没有改变，您可以使用:nth-child()：

用 class ms-WPHeader 隐藏第一个 tr（注意：这会在每个 table 中隐藏第一个 tr）：

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

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

Answer 2

您不能通过 CSS select 内部带有特定文本的元素。不过，您可以做的是通过 jQuery 查找该元素，然后向其添加 class，这样您就可以通过 CSS.[=12 select 它=]

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

然后在CSS

.hide{
    display:none;
}

Answer 3

可以用:contains来忽略CSS到select文本节点的不能

下面有两个 table，其中第二个 table 文本可见。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="ms-WPHeader">
    <td colspan="3">
      <div class="ms-WPTitle">
        <span>Text-Social Notification Properties</span>
      </div>
    </td>
  </tr>
</table>

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

Answer 4

有一个 :contains('') 伪 class 的规范，但我无法让它在任何浏览器上运行。

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

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

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

这是目前实现这一目标的唯一方法。

Answer 5

这就是我仍然建议你可以这样使用

$('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 6

不使用 jQuery，直接 JavaScript 使用 XPath（如评论中所述）：

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>

"having a class" 的 XPath，在 CSS 中很简单，在 XPath 中有点痛苦；但如果您知道确切的 class 属性（即 "there will be no other classes but ms-WPHeader there"），它可以简化很多：

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

Answer 7

span 是一个网络元素，因此您可以 select 使用 CSS 选择器。然后你可以做 WebElement.getText() 来检索文本。无需为此使用 xpath。

如何使用 CSS select div 中带有文本的跨度？

How to select a span with a text inside a div using CSS?

html

css

css-selectors