Question

我的网页上有各种各样的ul但是由于添加了最新版本，因此其样式会影响页面上的其他列表。我怎样才能确保这个ul的样式只影响这个。我已经尝试过，但却无法让它发挥作用。

HTML CODE

CSS

.image{
height: 252px;
width: 252px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 40px;
background-image: url(../images/danmorris_profile.png);
}
.overlay{
width:252px;
height:252px;
display:none;
position:absolute;
top:40px;
left:0px;
}
.overlay div {
position:relative;
display:inline-block;
top:40px;
margin: 40px 5px 0 0;
}

ul { list-style: none; width: 252px; 
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;

}

ul li {
position: relative;
display: inline-block;
width: 252px;
height: 252px;
}

li:hover .overlay {
display:block;
background-color:black;
opacity:0.75;
}
.bt1 {
background-color:orange;
width:50px;
height:50px;
}
.bt2 {
background-color:green;
width:50px;
height:50px;
}

提前致谢

Answer 1

您可以将ul放入#your_ul_id而不是<ul id="your_ul_id">...</ul>，并使您的ul具有此ID：ul.some_class{ ... }

如果您要应用多个列表样式，则可以使用类：

的CSS：

<ul class="some_class" ></ul> <ul class="some_class" ></ul>

在html中：

{{1}}

如何在不影响网页上的其他列表的情况下设置特定ul的样式

1 个答案: