html - 未处理单个选择器

Question

我为 Roll20 编写了Unknown Armies Angular 色表.完整的源代码可在 Roll20 Character Sheets repository 上找到.

我的 CSS 文件中的第一个选择器是:

div.sheet-madness
{
    position: relative;
    padding: 0px 25px 0px 25px;
}

如果 CSS 源代码中没有选择器，VTT 会在每个选择器前添加 .charsheet，以确保字符表不会修改页面其他地方的任何内容。出于类似的原因，它还为 HTML 源代码中使用的每个类添加了 sheet-。当我查看 VTT 的页面源代码时，正如预期的那样，我在标题中找到了一个样式元素，其中包含:

.charsheet div.sheet-madness
{
    position: relative;
    padding: 0px 25px 0px 25px;
}

但是，疯狂分区中的复选框没有正确排列。当我检查 div 上的样式时，我什么也没得到:

我的其他选择器似乎都工作得很好，包括 div.sheet-madness > input[type="checkbox"].sheet-madness 和 div.sheet-madness: last-child > input[type="checkbox"].sheet-madness + span::before.我不明白怎么了，为什么这个一个选择器似乎失败了。

此问题还导致 attr_$stress-$notchType_max 输入位于完全错误的位置，因为它们是绝对定位的，并且 div.sheet-madness是它们的父元素，我希望绝对定位是相对于它的。

Answer 1

我仍然不确定为什么会发生这种情况，但是，我设法通过在 CSS 文件顶部添加一个虚拟选择器来修复它:

div.nop { }

div.sheet-madness
{
    position: relative;
    padding: 0 25px 0 25px;
}