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

Question

我这里有一个 fiddle :

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 里面，而是绝对定位在它附近