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%);
}