我在网上发现了这个由其他人创建的很酷的 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 的样式而不是它们各自的规则,但以我有限的知识,我不知道如何解决它。
最佳答案
将一个类添加到您的“滚动”ul,例如:
<ul class="scroll"...
然后将 CSS 选择器更改为
ul.scroll {...
ul.scroll li {...
现在 CSS 只会将 ul 元素应用于“scroll”类及其子元素。
关于html - 冲突的CSS规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25746992/