Question

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

这是我发现的滚动视图的css部分是culpret。

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>

我可以看到问题发生的原因，他们都采用了导入滚动视图的样式而不是各自的规则，但由于我的知识有限，我不知道如何解决它。

Answer 1

在您的＆＃34;滚动＆＃34;添加课程ul，例如：

<ul class="scroll"...

然后将CSS选择器更改为

ul.scroll {...

ul.scroll li {...

现在CSS只会使用＆＃34;滚动＆＃34;来应用ul元素。上课和他们的孩子。

冲突的CSS规则

1 个答案: