Question

尝试覆盖KendoUI网格中标题的默认对齐方式。

标准选择器如下所示;

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

由于.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。

Answer 2

你可以试试这个：

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

对于@ theycallmemorty的评论，我已经解决了这个问题。

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

CSS选择器 - 特异性问题

2 个答案: