3

我注意到使用聚合物定制样式时级联并不总是正确的。从它的外观来看，这可能是级联应用于自定义元素的方式中的一个错误，但我只想确认我没有做一些愚蠢的事情。

对于我的自定义元素，请考虑以下范围样式：

    #price ::content .price span {
        display: block;
        padding: 4px;
        border-top: 1px solid var(--color-gray1);
    }
    #price ::content .price span:first-child { border-top: none; }

...但是一旦渲染， :first-child 就会被第一个定义覆盖，如下图所示。确保border: none正确应用 my 的唯一方法是使用!important，我不希望这样做。

在此处输入图像描述

我应该注意到，我在许多其他地方都看到过这种行为，并选择仅将!important其用作快速解决方案，但这开始感觉很笨拙。

只需在此处添加渲染元素的图像即可显示“不正确”的顶部边框。

在此处输入图像描述

4

3 回答 3

5

据我了解，问题来自 CSS 变量/自定义属性 polyfill。

在这种情况下，它添加了另一个类.product-0来限定您使用的属性var(--color-gray)。您可能也已经想到了这一点，但只是指出来。

您可以使用同样特定的选择器（无需使用!important）来覆盖它，例如#price ::content .price.price span:first-child（注意重复的.price）。

我不知道这是否可以在 polyfill 中修复。

于 2015-07-17T10:28:12.960 回答
0

第一个声明比第二个更具体。这可能是问题所在。

于 2015-07-17T10:20:10.683 回答
0

DOM 结构的规范是覆盖 css 的主要角色。

#price ::content .price span {
    display: block;
    padding: 4px;
    border-top: 1px solid var(--color-gray1);
}

#price ::content .price span比 更具体#price ::content .price span:first-child。

于 2015-07-17T10:31:38.167 回答