如何使用CSS选择仅包含空格（ ）的元素？

Question

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

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

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

我已经尝试了以下方法：

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

使用以下内容并设置红色背景：

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

结果如下：

- ElviraC

---

在 CSS 中不存在“Contains”。尽量使用英语编码，不要给变量起荷兰语名称。 - Wimanicesir

您的表格是通过脚本填充的，对吧？那么，每当单元格仅填充了 时，请为表格单元格添加一个新类。 - Mr Lister

Answer 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中进行选择。

- Nicolae Maties

Answer 2

曾经有一个 :blank 的草案，但它并没有被浏览器实现。

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

- Teetrinker

Answer 3

试试这个

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

- Rejoanul Alam