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

Question

我无法让我的 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 选择器？

Answer 1

您没有针对您的 css 中的第 th 元素。

如果你想覆盖 Bootstrap ，像这样定位 th 元素:

#userLeadTableHeaderRow th {
  text-align: center;
}