为什么我的更具体的CSS样式没有覆盖Bootstrap?

时间:2017-08-06 17:43:35

标签: html css twitter-bootstrap

我无法使用我的CSS样式来覆盖Bootstrap的默认值来对齐我的表头。这是我的表:

<table class="userProjectsTable" id="userLeadProjectsTable">

    <tr class="userProjectsHeaderRow" id="userLeadTableHeaderRow">
        <th>Project Title</th>
        <th>Created Date</th>
        <th>Currently Active</th>
        <th>Go to Project Workspace</th>
    </tr>
    <tr> ...rest of rows... </tr>
</table>

这里有一些我用来格式化它的CSS:

.userProjectsTable {
    text-align: center;
    width: 95%;
    border-radius: 7px;
}

#userLeadTableHeaderRow {
    background-color: rgba(6, 47, 55, .9);
    text-transform: uppercase;
    text-align: center;
    font-size: 1.1em;
    border: 3px solid white;
    border-radius: 7px;
    height: 20px;
}

但是当我检查源代码时,它表示正在从Bootstrap的table.less CSS表单中取出文本对齐方式。违规风格化来自这里:

th {
 text-align: left;
}

得分为1的元素选择器如何覆盖类和ID选择器?

2 个答案:

答案 0 :(得分:2)

Bootstrap正在设置第th个元素的Text Align属性;并且你要覆盖Table和tr元素的CSS。

您需要覆盖th或td元素的样式才能使属性生效。

答案 1 :(得分:2)

您没有定位到css中的th元素。

如果要覆盖引导程序,请将th元素定位为:

#userLeadTableHeaderRow th {
  text-align: center;
}