如何使用 CSS 定位仅包含空格（）的元素？答案

【问题标题】：How to target elements that only contains a space( ) with CSS?如何使用 CSS 定位仅包含空格（）的元素？
【发布时间】：2019-08-24 18:39:41
【问题描述】：

我有一个表格，其中有一些列包含以下代码：

<td class="t-Report-cell" align="right" headers="KORTING_PERC">&nbsp;</td>

我希望能够针对具有 headers="KORTING_PERC" 并且仅包含空格的 html 变体的 TD。

我尝试了以下方法：

td[headers="KORTING_PERC"]:contains("&nbsp;")
td[headers="KORTING_PERC"]:contains(" ")
td[headers="KORTING_PERC"]:not(:empty)

使用以下红色背景：

[headers="KORTING_PERC"]:not(:contains(" ")){
  background: red;
}

结果：

【问题讨论】：

'Contains' 在 css 中不存在。始终尝试用英文编码，不要给变量荷兰语名称。
您的表可能是通过脚本填充的？然后给表格单元格一个新类，只要它们只填充一个

标签： css css-selectors spaces

【解决方案1】：

div[headers='KORTING_PERC'][data-value='23'] {
   background-color: red;
}

     <div class="t-Report-cell" align="right" data-value="23" headers="KORTING_PERC">23</div>
     <div class="t-Report-cell" align="right" data-value="" headers="KORTING_PERC">23</div>

您不能使用 CSS 通过innerText 进行选择，您可以使用 jQuery 通过文本进行选择，或者您可以在 html 标记中添加另一个属性，其中包含元素的值并在 CSS 中通过该属性进行选择。

【讨论】：

【解决方案2】：

曾经有一个 :blank 的草稿，但它没有进入浏览器实现。

https://css-tricks.com/almanac/selectors/b/blank/

【讨论】：

【解决方案3】：

试试这个

$('td[headers="KORTING_PERC"]').each(function(){
   if($(this).text() == '&nbsp;' || $(this).text() == ''){
      $(this).css('background','red');
   }
});

【讨论】：