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

【问题标题】：How to select a span with a text inside a div using CSS?如何使用 CSS 在 div 内选择带有文本的跨度？
【发布时间】：2020-07-08 15:00:23
【问题描述】：

结构是这样的（取自浏览器），它是在共享点Mysite中动态生成的。我无法控制 HTML。我需要使用 css 隐藏整个 tr。问题是页面中有许多类似的 tr 结构，但 span 中的文本不同。请建议一种仅隐藏带有文本 Social Notification Properties

的 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;
}

【问题讨论】：

不可能使用较低级别的元素来限制选择器，只能使用较高级别的元素。您可以使用带有 XPath 的 JavaScript 来选择您的 tr，然后将样式属性直接附加到它；它不能在 CSS 中完成。
嗨@Dee 我想分享一下，如果您无法控制制作 HTML，但您可以将一个类添加到您想要使用的相同表格中，然后提供那个类的 css 属性然后你可以很容易地实现你的目标
你说的是哪种访问方式？
看看我给出的示例试试我想说的代码

标签： html css css-selectors

【解决方案1】：

你可以使用:contains来忽略CSS无法选择文本节点的问题。

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

$(".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>

【讨论】：

【解决方案2】：

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

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

然后在 CSS 中

.hide{
    display:none;
}

【讨论】：

它隐藏了整个页面

【解决方案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>

据我了解，您想要实现的目标是我的尝试。

【讨论】：

【解决方案4】：

:contains('') 伪类有一个规范，但我无法使其在任何浏览器上运行。

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

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

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

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

【讨论】：

:contains() 十年前已从规范中删除 - 您可以通过转到最新版本的规范来查看这一点，您可以在页面顶部找到指向该链接的链接。另见stackoverflow.com/questions/4781141/…

【解决方案5】：

不使用 jQuery，使用 XPath 的纯 JavaScript（如 cmets 中所述）：

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')]"

【讨论】：

谢谢，但我用 jquery 解决了它。将为此添加书签以备将来使用。

【解决方案6】：

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

用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/

【讨论】：

遗憾的是内容会根据用户偏好而变化。
@Dee 所以您需要使用 JS 或/和 JQuery 来执行该操作。纯 CSS 解决方案不存在（目前）

【解决方案7】：

span 是一个 web 元素，因此您可以使用 CSS 选择器来选择它。然后您可以执行 WebElement.getText() 来检索文本。无需为此使用 xpath。

【讨论】：