具有多个类的元素的 CSS 特异性

Question

我遇到了一个问题，我无法获得使某些代码正常工作所需的特异性级别。我有一个 <ul>我想为其制作 <li> 的背景悬停在带有花哨的小滑入动画上时会发生变化。

我设法使用 linear-gradient 让它工作得很好用transition在 :hover .我决定让不同的列表项具有不同的背景颜色，所以我添加了三个类:.red , .blue , 和 .gold ，我想我会用 .level1 制作所有东西类具有线性渐变本身以外的所需属性，即 background-size: 200% 100% , background-position:right bottom , 和 transition:all 1s ease , 然后为每个单独的颜色类指定线性渐变和颜色。我知道这一切都是无形的，但我会在下面发布我的代码。

这是我希望拥有的(或类似的东西):

    body .push [class^="level1"] {
        background-size: 200% 100%;
        background-position:right bottom;
        transition:all 1s ease;
    }

    body .push [class^="level1"]:hover {
        background-position:left bottom;
    }

    body .push .level1.blue {
        background: linear-gradient(to right, #282e59 50%, rgba(0,0,0,0) 50%);
    }

    body .push .level1.red {
        background: linear-gradient(to right, #94272a 50%, rgba(0,0,0,0) 50%);
    }

    body .push .level1.gold {
        background: linear-gradient(to right, #e5d037 50%, rgba(0,0,0,0) 50%);
    }

但这行不通。为了使第一类中的值生效，我必须摆脱第一个 body .push [class^="level1"] { ... }并将该信息放入三个特定于颜色的信息中，例如

            body .push .level1.blue {
        background: linear-gradient(to right, #282e59 50%, rgba(0,0,0,0) 50%);
        background-size: 200% 100%;
        background-position:right bottom;
        transition:all 1s ease;
    }

    body .push .level1.red {
        background: linear-gradient(to right, #94272a 50%, rgba(0,0,0,0) 50%);
        background-size: 200% 100%;
        background-position:right bottom;
        transition:all 1s ease;
    }

    body .push .level1.gold {
        background: linear-gradient(to right, #e5d037 50%, rgba(0,0,0,0) 50%);
        background-size: 200% 100%;
        background-position:right bottom;
        transition:all 1s ease;
    }

有什么方法可以整合这些信息吗？

Answer 1

看来问题不在于特异性，而是您的速记 background: 声明覆盖了原始声明中的位置和大小值。尝试在覆盖中将 background: 更改为 background-image::

body .push .level1.blue {
    background-image: linear-gradient(to right, #282e59 50%, rgba(0,0,0,0) 50%);
}

body .push .level1.red {
    background-image: linear-gradient(to right, #94272a 50%, rgba(0,0,0,0) 50%);
}

body .push .level1.gold {
    background-image: linear-gradient(to right, #e5d037 50%, rgba(0,0,0,0) 50%);
}