Селектор CSS - проблема специфичности

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

С ками сетки заголовок th.k-заголовок имеет 2 класса и 1 элемент (значение 21) и вы пытаетесь переопределить с .gridheaderalign.k-header где- классы там так, это не будет отменено, но использование .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; 
    }