CSS选择器 - 特异性问题

尝试覆盖KendoUI网格中标题的默认对齐方式。CSS选择器 - 特异性问题

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

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

确定这是一个特异性问题，但不知道如何得到正确的选择器。

来源

2015-09-08 OEDev

用途：

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

由于.K网头th.k头有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。

来源

2015-09-08 06:41:44

非常感谢Bhojendra - 这对我很有用。 – OEDev

-1

你可以试试这个：

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

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

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

来源

2015-09-08 06:44:06 fatih

使用！重要的通常被认为是反模式。 http://stackoverflow.com/questions/3427766/should-i-avoid-using-important-in-css – theycallmemorty

CSS选择器 - 特异性问题

回答

相关问题