如何选择样式并将其应用于自定义标签

Posted 2023-03-28

【中文标题】如何选择样式并将其应用于自定义标签

【英文标题】：How to select and apply styling to custom tags

【发布时间】：2020-09-20 05:52:47

【问题描述】：

我正在尝试更改单个表头的背景颜色，问题是没有唯一的id。有一个独特的/服装标签，但我找不到选择它的方法。

元素看起来像这样

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

如果我选择

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

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

【参考方案1】：

你可以使用属性选择器来做到这一点。

[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;"
>

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

【讨论】：

.ag-header-cell[col-id="party"] 两个都用了，效果很理想

【参考方案2】：

这里有两个问题。

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

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

而在CSS中选择这两个类，只需在点之间添加一个逗号（,）和一个空格，例如：

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

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