css - 如何将字体样式应用于过滤后的列标题？

Question

我在应用程序中有 kendo 网格，它有可过滤的 true 选项。我的要求是当我们将过滤应用于列时，列标题字体样式将更改为斜体。该怎么做？如果有人知道这个请告诉我..

Answer 1

我个人没用过kendo grid，但我很快试用了demo here , 并发现它向 元素内的 元素添加了“k-state-active”类。

但是，标题文本不在 元素内。你需要的是 parent selector which current CSS does not support .

据我所知，这在纯 CSS 中是不可能的

你需要一些javascript。这是使用 jQuery 的可能解决方案:

// adding click event handler to the "Filter" and "Clear" buttons
$('form.k-filter-menu .k-button').click(function(e) {
  setTimeout(function() {
    // first make all headers normal, then make the filtered column header italic
    $('th.k-header.k-filterable').css('font-style', 'normal').filter(
      ':has(> .k-grid-filter.k-state-active)').css('font-style', 'italic');
  }, 100);
})

使用setTimeout是因为“k-state-active”类是在数据过滤后才添加的。同样，我不熟悉剑道网格，所以我不知道是否有办法为过滤器提供回调方法。您可能需要对此进行调查，因为如果您有庞大的数据集，100 毫秒的延迟可能不够长。

对于 jQuery 特定解决方案，我深表歉意。啊...没有 jQuery 我什么都做不了。耻辱。

但希望这对您有所帮助!如果您需要任何进一步的帮助，请告诉我。