CSS选择器 - 特异性问题

Question

试图覆盖Kendoui Grid中的标头的默认对齐。

标准选择器看起来像这样;

.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; */
}

我已经在标题单元格中添加了一个自定义类（“ 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选择器，以便我可以覆盖默认的文本对齐，尝试了许多不同的排列，但无法正常工作！ 

e.g.

.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有2个类和1个元素（值为21），并且您正在尝试使用

.gridheaderalign.k-header

有2个类，因此，这不会覆盖，而是使用

.k-grid-header th.k-header.gridheaderalign

将覆盖它有3个类和1个元素（值为31）。 这也将覆盖：

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

这里是2个类和1个元素（值为21），尽管它将覆盖，因为它是样式表中的最后一个规则。

了解特异性的工作原理。请参阅this Answer

.

我以前的错误答案是：

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

Answer 2

对于 @elsecallMemorty的评论，我已经解决了。 考虑到 @elscallMemorty的评论和修复后，解决方案现在是：

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