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

Question

我遇到了一个问题，我无法获得使某些代码工作所需的特异性水平。我有一个<ul>，我想为它制作<li> 的背景，当它悬停在一个漂亮的小滑入式动画上时。

我设法在:hover 上使用linear-gradient 和transition 让它工作得很好。我决定让不同的列表项有不同的背景颜色，所以我添加了三个类：.red、.blue 和.gold，我想我会用@987654329 制作所有内容@class 具有线性渐变本身以外的必需属性，即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%);
}

Answer 2

我猜你有类似的html：

...
<li class="level1">...</li>
<li class="level1 red">...</li>
<li class="level1 gold">...</li>
<li class="level1 blue">...</li>

在这种情况下，您可以将代码更改为

.push .level1 {
    background-size: 200% 100%;
    background-position:right bottom;
    transition:all 1s ease;
}

.push .level1:hover {
    background-position:left bottom;
}

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

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

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