聚合物自定义样式有时会错误级联答案

【问题标题】：Polymer custom style sometimes cascades incorreclty聚合物自定义样式有时会错误级联
【发布时间】：2015-07-17 10:11:26
【问题描述】：

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

为我的自定义元素考虑以下范围样式：

    #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 的唯一方法是使用!important，我不想这样做。

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

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

【问题讨论】：

标签： css polymer custom-element

【解决方案1】：

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

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

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

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

【讨论】：

我确实不知道css变量会影响它。我将规则更改为：border-top: none var(--color-gray1);，这解决了问题，因为 polyfill 的 CSS 输出“更具体”。
如果可能的话，您可以通过使用 1 - 2 级深度的类选择器来避免这种情况。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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 更具体。

【讨论】：