Редактирование 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 работал только для первого списка, а не для второго. Я знаю, что мне нужно добавить класс для элементов первого списка и отредактировать CSS для этого класса. Но я не мог этого сделать. Я не знаю, что делать для li ul li a в CSS. Можете ли вы рассказать мне, как редактировать CSS и первый список в этом случае? Благодарю.

Answer 1

Try:

#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 элементов). И вы хотите применить только некоторый css к первому списку без использования селектора классов или идентификаторов.

Вы можете использовать селектор first-of-type псевдо, например, так:

ul:first-of-type { } 

И применить CSS к своим детям:

ul:first-of-type li { } 

По Can I use это очень хорошо поддерживается (если вам не требуется Поддержка IE8).