Html 为什么我的CSS不透明度转换不起作用？

我刚开始学习CSS，遇到了工具提示不透明度转换的问题。我做了一个示例，其中只包含适用于此问题的代码。我已经创建了一些工具提示，并希望在工具提示的一些变体中添加不透明度转换，但我无法实现这一点

当悬停文本时，可见性触发良好，但是当向元素添加第二个类来控制悬停时的不透明度时，什么也没有发生，我尝试过重写它以仅使用一个类，但得到了相同的结果。从我找到和阅读的所有文档来看，这应该是有效的，所以我被踩死了

任何关于如何解决这个问题的建议都将不胜感激

.工具提示{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；
文本对齐：居中；
}
.工具提示\u内容{
可见性：隐藏；
宽度：120px；
背景色：黑色；
颜色：橙色；
文本对齐：居中；
填充：5px0；
边界半径：6px；
}
#工具提示\u内容\u演示\u 8{
位置：绝对位置；
z指数：1；
顶部：-10px；
左：105%；
不透明度：0.1；
过渡：不透明度1s；
}
#工具提示内容演示8:：之后{
内容：“；
位置：绝对位置；
最高：50%；
右：工具提示左侧的100%；/**/
页边顶部：-5px；
边框宽度：5px；
边框样式：实心；
边框颜色：透明黑色透明；
}
.tooltip:悬停.tooltip\u内容{
能见度：可见；
}
.tooltip:悬停。工具提示\u内容\u样式{
不透明度：1；
}
悬停时淡入工具提示
将鼠标移到下面的文本上时，工具提示文本将淡入，从几乎不可见变为可见需要1秒时间

将鼠标悬停在我的上方以查看工具提示
这是工具提示文本内容

ID选择器始终按类控制。因此，特殊条件

！重要信息

必须添加才能使

不透明度：1

正常工作。下面是一个例子

正文{
文本对齐：居中；
}
.工具提示{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；
文本对齐：居中；
}
.工具提示\u内容{
可见性：隐藏；
宽度：120px；
背景色：黑色；
颜色：橙色；
文本对齐：居中；
填充：5px0；
边界半径：6px；
}
#工具提示\u内容\u演示\u 8{
位置：绝对位置；
z指数：1；
顶部：-10px；
左：105%；
不透明度：0.1；
过渡：不透明度1s；
}
#工具提示内容演示8:：之后{
内容：“；
位置：绝对位置；
最高：50%；
右：100%；
/*在工具提示的左侧*/
页边顶部：-5px；
边框宽度：5px；
边框样式：实心；
边框颜色：透明黑色透明；
}
.tooltip:悬停.tooltip\u内容{
能见度：可见；
}
.tooltip:悬停。工具提示\u内容\u样式{
不透明度：1！重要；
}

悬停时淡入工具提示
将鼠标移到下面的文本上时，工具提示文本将淡入，从几乎不可见变为可见需要1秒时间

将鼠标悬停在我的上方以查看工具提示
这是工具提示文本内容

ID比classWelcome to StackOverflow具有更高的特殊性！您的语句

不透明度：1

被

工具提示内容演示8

中的

不透明度：0.1

覆盖。放置一个

！重要提示
在
不透明度之后：1
，它应该可以工作。工具提示：hover.tooltip_content_styled{opacity:1！important；}此外，请查看[这篇关于CSS继承的文章][1]。[1] ：@m1crdy与我正在阅读的课程相比，这实际上是一个非常简单明了的解释，谢谢。