CSS 选择器 - 特异性问题

Question

正在尝试覆盖 KendoUI 网格中 header 的默认对齐方式。

标准选择器如下所示；

.k-grid-header th.k-header, .k-filter-row th {
    overflow: hidden;
    border-style: solid;
    border-width: 0 0 1px 1px;
    padding: .5em .6em .4em .6em;
    font-weight: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* text-align: left; */
}

我已经像这样向 header 单元格添加了自定义 class ("gridheaderalign")；

<th role="columnheader" data-field="DELIVERED_QUANTITY" rowspan="1" data-title="Del. Qty" data-index="5" id="3ed03852-7178-4513-9648-06a3e42bf69a" class="gridheaderalign k-header ng-scope" data-role="columnsorter"><a class="k-link" href="#">Del. Qty</a></th>

尝试编写 CSS 选择器以便我可以覆盖默认的文本对齐方式，尝试了多种不同的排列但无法正常工作！

例如

.gridheaderalign.k-header 
{
    text-align: center;
}

.gridheaderalign
{
    text-align: center;
}

确定是特异性问题，但不确定如何获得正确的选择器。

Answer 1

使用：

.k-grid-header th.k-header.gridheaderalign
{
    text-align: center;
}

Since .k-grid-header th.k-header has 2 classes and 1 element (the value is 21) and you're trying to override with .gridheaderalign.k-header where 2 classes are there so, this won't override but using .k-grid-header th.k-header.gridheaderalign will override as it has 3 classes and 1 element (the value is 31).

这也将覆盖：

th.k-header.gridheaderalign
    {
        text-align: center;
    }

Here are 2 classes and 1 element (the value is 21) though it will override as it is last rule in the stylesheet.

了解特异性如何运作。参见 this answer。

Answer 2

你可以试试这个：

    th[role=columnheader] {
         text-align: center !important;
    }

对于@theycallmemorty 的评论，我已经解决了。

    th[role=columnheader] {
         text-align: center;
    }

CSS 选择器 - 特异性问题

CSS Selector - issue of specificity

css

selector

kendo-ui