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

Question

我在应用程序中有剑道网格，并且它具有可过滤的真实选项。我的要求是当我们将过滤应用于列时，列标题字体样式将更改为斜体..怎么做？如果有人对此有想法请告诉我..

Answer 1

我个人没有用过剑道网格，但是我很快尝试了这里的演示，发现它在 <th> 元素内的 <a> 元素中添加了“k-state-active”类。

但是，标题文本不在 <a> 元素内。您需要的是当前 CSS 不支持的父选择器。

据我所知，这在纯 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，我什么都做不了。耻辱。

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

Answer 2

这可以通过一个 CSS 行来实现：

.k-filterable a.k-grid-filter.k-state-active ~ .k-link {font-style:italic;}

无需使用 java 脚本。