Question

我知道这是一个愚蠢的问题，但我自己找不到解决方案。我的HTML页面中有两个列表。第一个是：

<ul id="menu">
  <li><a href='@Url.Action("MainPage","Shirts")'>Main Page</a></li>
  <li><a href='@Url.Action("OnSale","Shirts")'>On Sale</a></li>
  <li><a href='@Url.Action("Recent","Shirts")'>Recent</a></li>
</ul>

第二个是PagedListPager，它生成一个HTML列表：

@Html.PagedListPager(Model, page => Url.Action("Mainpage",
    new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

这是我对此HTML的CSS：

ul {
    list-style-type:none;
    margin:0;

}

li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

li a {
    display:block;
    min-width:140px;
}

li:hover a {
    background: #19c589;
}

li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
}

li:hover ul a:hover {
    background: #19c589;
    color: #fff;
}


li ul li {
    display: block;
    float: none;
}

li ul li a {
    width: auto;
    min-width: 100px;
}

我的问题是，我希望我的CSS仅适用于第一个列表，而不是第二个列表。我知道我需要为第一个列表的元素添加一个类，并为该类编辑CSS。但我不能这样做。我不知道如何处理CSS中的li ul li a。在这种情况下，你能告诉我如何编辑CSS和第一个列表吗？感谢。

Answer 1

尝试：

#menu > li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

#menu > li a {
    display:block;
    min-width:140px;
}

Answer 2

您可以使用CSS3子选择器来选择特定属性：

ul li a { /* shared styles */ }
ul > li > a { /* parent list styles */ }
ul ul > li > a { /* child list styles */ }

https://css-tricks.com/child-and-sibling-selectors/

Answer 3

您说您的网页上有两个列表（因此有两个ul元素）。而且你只想在不使用类或id选择器的情况下将某些css应用于第一个列表。

您可以使用first-of-type伪选择器，如下所示：

ul:first-of-type {  }

并将css应用于其子女：

ul:first-of-type li {  }

根据Can I use，这得到了很好的支持（除非你需要IE8支持）。

编辑CSS以申请某些元素

3 个答案: