html - 冲突的CSS规则

Question

我在网上发现了这个由其他人创建的很酷的 css 滚动功能，我认为将它应用到我正在创建的扩展的某些部分中会很酷。这是第一次真正使用 css 和 js，所以我仍在努力了解一切是如何工作的。我遇到的问题是我发现一些用于滚动的 css 干扰了我的选项卡的 ul li 元素，从而弄乱了页面的布局。

这是我发现的 ScrollView 的 css 部分。

ul {
    position: relative;
    width: 230px;
    height: px;
    margin: 0px;
    padding: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    list-style: none;

    -webkit-perspective: 400px;
       -moz-perspective: 400px;
        -ms-perspective: 400px;
         -o-perspective: 400px;
            perspective: 400px;
}
    ul li {
        position: relative;
        padding: 16px;
        background: #eee;
        color: #252525;
        font-size: 18px;
        z-index: 2;

        -webkit-transform: translateZ(0px);
           -moz-transform: translateZ(0px);
            -ms-transform: translateZ(0px);
             -o-transform: translateZ(0px);
                transform: translateZ(0px);
    }

这是我正在使用的选项卡的小 css(在 html 中):

        <ul class="tab-links" style="
           margin-bottom: 0px;
           padding-left: 0px;
           margin-top: 0px;
           ">
           <li class="" style="
              margin-left: 0px;
              margin-right: 6.875;
              "><a href="#tab1" style="
              width: 60px;
              ">New</a></li>
           <li class="active" style="
              margin-left: 6.875;
              margin-right: 6.875;
              "><a href="#tab2" style="
              width: 60px;
              ">Existing</a></li>
           <li class="" style="
              margin-right: 0px;
              margin-left: 6.875;
              "><a href="#tab3" style="
              width: 60px;
              ">Passport</a></li>
        </ul>

我明白为什么会出现问题，它们都采用导入的 ScrollView 的样式而不是它们各自的规则，但以我有限的知识，我不知道如何解决它。

Answer 1

将一个类添加到您的“滚动”ul，例如:

<ul class="scroll"...

然后将 CSS 选择器更改为

ul.scroll {...

ul.scroll li {...

现在 CSS 只会将 ul 元素应用于“scroll”类及其子元素。