如何使用CSS在div中选择带有文本的跨度? [英] How to select a span with a text inside a div using CSS?

问题描述

结构是这样的(取自浏览器)，它是在共享点Mysite中动态生成的.我无法控制HTML.我需要使用CSS隐藏整个tr.值得注意的是，页面中有许多类似的tr结构，但跨度不同，请提出一种仅隐藏文本 Social Notification Properties

The structure is like this(taken from browser), it is dynamically generated in share point Mysite. I do not have control over HTML. I need to hide the whole tr using css. The catch is that there are numerous similar tr structure in the page but with different text in span.Please suggest a way to hide only the tr with text Social Notification Properties

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

到目前为止，我已经尝试过了，但是失败了.

I have tried this so far but failed.

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

还有这个

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

使用此选项可隐藏所有明显的跨度

using this hides all the span which is obvious

.ms-WPTitle span
{
display:none;
}

推荐答案

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

You can use :contains to neglect the inability of CSS to select text node.

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

Below there are two tables in which the second table text is visible.

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

这篇关于如何使用CSS在div中选择带有文本的跨度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！