JS轮播滑块按箭头方向滑动拆分CSS类后失效问题求助

开发背景 #

我需要为我的网站开发一个轮播滑块，因此单独做了一个"子页面"用来开发调试（目前仅为原型，CSS只有基础样式），预期效果是用户点击箭头后，滑块会向对应方向滑动，比如点击右箭头，当前滑块会向右侧滑出。JS逻辑本身实现难度不高（我已经写完了对应代码，本次提供的代码中未引入），但遇到了CSS相关问题。

问题现象 #

我需要新增2个CSS类实现滑动效果，分别命名为.slideLeft和.slideRight，前者设置translateX为-100%，后者设置为100%（虽然也可以不使用类实现，但为了定位问题我选择拆分类）。
我把原来写在基础类.slide中的部分代码抽离到了.slideLeft中，同时给HTML中的滑块元素加上了该类，和之前直接写在.slide里的逻辑完全一致，但运行后效果异常。
我的问题是：为什么完全一致的样式规则写在.slide类中运行正常，拆分到独立类后整个轮播滑块就出现故障？

注意事项 #

• 附带的代码为可正常运行版本，CSS中被注释的部分取消注释后就会导致轮播失效。
• 当前轮播效果看起来卡顿不流畅，是因为我把translateX的数值临时改成了-50%，否则取消注释后所有滑块都会不可见。

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>slider</title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <div class="center">
            <div id="slider">
                <span class="sButton" onclick="NextPrevButton(-1)"> &#10094;</span>
                <div class="slide slideLeft" id="s1" > PERFECT </div> <!-- two classes here -->
                <div class="slide slideLeft" id="s2" > FLAWLESS </div> <!-- two classes here -->
                <div class="slide slideLeft" id="s3" > GORGEOUS </div> <!-- two classes here -->
                <div class="slide slideLeft" id="s4" > SLIDER </div> <!-- two classes here -->
                <span class="sButton" onclick="NextPrevButton(1)"> &#10095;</span>
            </div>
            <div id="buttons">
                <span class="sDot" onclick="chooseSlide(0)"></span>
                <span class="sDot" onclick="chooseSlide(1)"></span>
                <span class="sDot" onclick="chooseSlide(2)"></span>
                <span class="sDot" onclick="chooseSlide(3)"></span>
            </div>
        </div>
    </div>
</body>
</html>

CSS代码 #

.slide {
    opacity: 1;
    visibility: hidden;
    display: none;
    /* uncommenting .slideLeft (activated in html) screws up the slider, 
       despite being exact same thing as in that class */
    transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
    transform: translateX(-50%); /* translating only 50% just to show the error, destinated value is -100% */
}
    .active{
        opacity: 1;
        z-index: -10;
        visibility: visible;
        transform: translateX(0);
    }
    /* .slideLeft{
        transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
        transform: translateX(-50%);
    }
    .slideRight{
        transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
        transform: translateX(50%);
    } */

这是CSS选择器优先级导致的问题：

1. .active类的权重和.slideLeft/.slideRight类的权重完全相等，都是单个类选择器，权重值为10
2. CSS规则优先级相等的情况下，后定义的规则会覆盖前面的规则
   你注释掉的.slideLeft、.slideRight是写在.active类的后面的，当你给元素同时加上slide+slideLeft+active三个类的时候，.slideLeft里的transform规则会覆盖掉.active里的transform: translateX(0)，导致激活的滑块也被偏移，就出现了所有滑块不可见/轮播失效的问题。

调整CSS类的定义顺序，把.slideLeft、.slideRight放在.active类的前面即可，这样当元素同时有active类和方向类的时候，.active的transform规则优先级更高，能覆盖方向类的偏移：

.slide {
    opacity: 1;
    visibility: hidden;
    display: none;
    transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
}
/* 方向类放在active前面 */
.slideLeft{
    transform: translateX(-100%);
}
.slideRight{
    transform: translateX(100%);
}
.active{
    opacity: 1;
    z-index: -10;
    visibility: visible;
    transform: translateX(0);
}

如果需要更高的兼容性，也可以给.active类提高权重，比如写成.slide.active，权重就变成20，不管顺序如何都会覆盖单个类的规则。

内容的提问来源于stack exchange，提问作者Billy.pl