使用css在div中选择一个带有文本的span [英] select a span with a text inside a div using css

问题描述

结构是这样（从浏览器），它是在共享点Mysite动态生成的。我不能控制HTML。我需要隐藏整个tr使用css。抓住的是，在页面中有许多相似的tr结构，但在span中有不同的文本。请建议一种方法，只有文本

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

推荐答案

=https://api.jquery.com/contains-selector/ =nofollow>：包含忽略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中选择一个带有文本的span的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！