CSS 工具提示在 WordPress HTML 文件中不起作用

Question

现在我正在为我们的临时 WordPress 网站制作格式良好的 CSS 文件，直到新网站准备就绪。在制作 CSS 样式表和漂亮的 HTML 文件后，我发现如果它们在帖子中内联，它们在 WordPress 中不起作用，而是我不得不将它们放在单独的原始 HTML 文件中（使用“WP File Manager”插件来将它们上传到单独的文件夹。）之后，它们在站点上的显示方式与它们在我的硬盘或我的个人 (LAMP) 测试站点（使用 Safari 10.1.1 OS X）上的外观相匹配，如果我显示源在我的浏览器中，它看起来与我上传的相同。

然后我按照 w3schools 上的教程使用 CSS 创建了一个工具提示样式。在样式表中，我将“编辑”定义为我对原始文本所做的更改的样式

.edit { /* changes made, */
    color: navy;
    position: relative;
    display: inline-block;
}
.edit .tooltip {
    font-size: medium;
    visibility: hidden;
    background-color: navy;
    color: white;
    text-align: center;
    width: 20em;
    padding: 0.5em;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
}
.edit:hover .tooltip{
    visibility: visible;
}

然后（根据教程）我在“编辑”文本中添加“工具提示”文本

<h5 class="edit">¶ Then shall be said or sung the following Canticle.
<span class="tooltip">This canticle is most commonly used.</span></h5>

在我的硬盘和我的个人网站上，工具提示是不可见的，直到我将鼠标悬停在它上面然后它会弹出一个气球。

但是当我将它加载到 WordPress 上时，隐藏的文本总是可见的内联，好像“工具提示”样式被忽略了。为了暂时解决这个错误（所以我不必重新编辑 HTML 文件），我可以通过将工具提示样式定义为来禁用和隐藏所有工具提示

.edit .tooltip {
    visibility: hidden;
    font-size: 0%;
}

这表明“工具提示”正在被看到，但隐藏部分的某些方面在 WordPress.com 上的解析方式不同。

那么，WordPress 是否可以使用某些 CSS 样式或属性来显示我的文本？有什么方法可以用 CSS 抢先覆盖它吗？我应该编写一个通过并手动隐藏工具提示的 JavaScript 吗？

我应该尝试什么实验让它消失？

PS：这与CSS Tooltip will not work on WordPress page 的问题不同，因为我的文本是内联显示的。

Answer 1

你是说：

但是当我将它加载到 WordPress 上时，隐藏的文本总是可见的内联，好像“工具提示”样式被忽略了。

这表明带有 tooltip 样式的文件在加载其他 css 样式之前加载。因此，最后加载的文件会覆盖之前加载的文件。

对于调试，尝试将!important 添加到您的工具提示样式规则中，如下所示：

.edit .tooltip {
    visibility: hidden !important;
    font-size: 0%;
}

看看是否有任何改变。

然后，修改您的 WordPress 文件，以便最后加载您的工具提示样式。这将允许您删除 !important 标志。 （因为使用该标志不是最佳做法，应尽可能避免）