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:声明覆盖了位置＆amp;原始声明中的大小值。尝试在覆盖中将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%);
}

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

2 个答案: