编辑 CSS 以申请某些元素

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 }))

这是我的 CSS HTML :

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 仅适用于第一个列表，而不适用于第二个列表。我知道我需要为第一个列表的元素添加一个 class 并为那个 class 编辑 CSS。但我做不到。我不知道 CSS 中的 li ul li a 该怎么办。你能告诉我在这种情况下如何编辑 CSS 和第一个列表吗？谢谢。

Answer 1

您可以使用 CSS3 子 select 或 select 特定属性：

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 2

尝试：

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

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

Answer 3

您说您的页面上有两个列表（所以有两个 ul 元素）。并且您只想将某些 css 应用于第一个列表而不使用 class 或 id 选择器。

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

ul:first-of-type {  }

并将 css 应用于其子项：

ul:first-of-type li {  }

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

编辑 CSS 以申请某些元素

Edit CSS to apply for certain elements

css

asp.net-mvc

pagedlist