vue.js - 为什么我的 bootstrap-vue b-table 列标题不在部署中居中？

Question

我有一个带有居中列标题的 b 表。当我在 http://localhost... 本地运行时，标题居中，但在部署中则不然。为什么会这样？

我尝试了两种方法来使标题居中。 我已将 text-center 属性添加到 b-table 组件中，如下所示...

    <b-table
        striped
        hover
        show-empty
        sort-icon-left
        :items="items"
        :fields="fields"
        class="text-center"
      >
    </b-table>

我已将此样式规则包含在我的自定义 scss 文件中，我将其导入 App.vue 中的应用中

表{ 文本对齐:居中； } 这两种方法在本地都工作得很好，但是当我部署时，列标题右对齐。

这是浏览器检查工具中“元素”选项卡的屏幕截图。

样式选项卡清楚地表明标签选择器中的 text-align: right 规则会覆盖标签选择器中的 text-align:center 规则。

Answer 1

text-align是 inherited property .

这意味着，在解析元素的此属性时，浏览器首先查找针对该元素的任何规则。有问题的元素是 <th> .
如果浏览器发现任何此类规则，它将应用选择器特异性最高的规则或具有同等特异性的规则中的最后一个。

如果不存在这样的规则，那么它会继承具有 text-align 的最近父级的值。指定值。
如果没有祖先有 text-align值，默认为start ，对于带有 direction="ltr" 的文档意味着 left对于带有 direction="rtl" 的文档，右 .

所以，基本上，CSS 通过 Bootstrap 应用于祖先之一:

.text-center {
  text-align: center !important;
}

...被应用于实际元素的以下规则覆盖:

th { text-align: right }

无论父规则的特殊性如何(因为它不直接针对元素)。

---

覆盖th您可以使用的规则:

table.text-center * {
  text-align: center
}

...因为table.text-center *比 th 具有更高的特异性它们都以元素为目标( <th> )。

显然，如果您只想将居中应用于 <th>元素，您应该替换 *与 th在上面的选择器中。

---

要回答您关于为什么它在本地工作而不是在远程工作的问题:您的远程设备有额外的 CSS(在 app.ee70fc50.css 中)，它可以解析 text-align值为 <th>元素，因此父值被忽略(而在本地，父值被继承，因为您没有将 CSS 应用到 <th> )。