如何 select 并将样式应用于自定义标签

Question

我正在尝试更改单个 table header 的背景颜色，问题是没有唯一的 id。有一个 unique/costum 标签，但我找不到 select 的方法。

元素看起来像这样

<div 
  class="ag-grid-header-cell ag-header-cell-sortable" 
  role="presentation" 
  unselectable="on" 
  col-id="name" 
  style="width:180px;left500px;"
>

如果我select

.ag-header-cell.ag-header-cell-sortable {
  background-color: #56CC2B;
}

它打印所有列 headers。我想 select col-id="name" 这可能吗？ Here 是页面示例。

Answer 1

这里有两个问题。

确保相应地分隔每种样式。样式标签应该这样写：

style="width:180px; left:500px;"

而对selectCSS中的两个类，只需在点之间加一个逗号（，）和一个space，如：

.ag-header-cell,
.ag-header-cell-sortable {
    background-color: #56CC2B;
}

如果这是你想要的，请告诉我！

Answer 2

您可以使用属性选择器来完成。

[col-id="name"]

[col-id="name"] { 
     background-color: #56CC2B;
     height: 500px;
}

<div 
  class="ag-grid-header-cell ag-header-cell-sortable" 
  role="presentation" 
  unselectable="on" 
  col-id="name" 
  style="width:180px;left:500px;"
>

这里我加了隐藏，这样效果就可以看到了。

如何 select 并将样式应用于自定义标签

How to select and apply styling to custom tags

html

css

ag-grid