为什么我的CSS选择器没有选择正确的元素？

Question

我在这里有一个小提琴：

https://jsfiddle.net/joduLnhx/

在我的CSS中，如果我使用：

.tooltip-inner {
    background-color: #0000FF !important;
}

我的工具提示显示为预期的蓝色：

但是如果我使用

.blue-tooltip .tooltip-inner {
    background-color: #0000FF !important;
}

然后即使我有，我的工具提示也不再是蓝色

<span class="blue-tooltip" v-tooltip="message">{{ message }}</span>`

第二个选择器为什么不起作用？

Answer 1

因为您的.tooltip-inner并不是真正位于.blue-tooltip内部，而是绝对位于其附近

Answer 2

尝试此操作将确保解决您的问题，因为工具提示div会在工具提示之后创建主体元素。 .tooltip .tooltip-inner{ background: red !important; }