Различные свойства CSS-тегов

Question

В настоящее время я работаю на веб-странице, проходя через курс Odin, и создал навигационную панель в верхней части страницы с помощью списков html, однако мне все равно хотелось бы использовать список в обычном режиме страница.

Есть ли способ вызвать набор свойств CSS только в пределах заданной области, например, как работают теги div для вызова класса в HTML?

Heres HTML and CSS in jsfiddle или ниже.

HTML:

<ul> 
    <li><a class="active" href="#home">Home</a> 
</li> 
    <li><a href="#music">Music</a></li> 
    <li><a href="#writing">Writing</a></li> 
    <li style="float:right"><a href="#about">About</a></li> 
</ul> 

<div class="mainBody"> 
    <h1>aeaeae</h1> 

    <p>A collection of work by.</p> 
</div> 

<ul> 
    <li><a href="#2016">2016</a></li> 
</ul> 

CSS:

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #bf5f5b; 
} 

li { 
    float: left; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover { 
    background-color: #c46561; 
} 

Я прошу прощения, если это простой вопрос, но я искал вокруг и не мог найти и ответ.

Answer 1

Вы можете добавить атрибут id в свою панель навигации <ul>, а затем поместить идентификатор перед каждым классом li в свой CSS, чтобы выбрать только те теги.

Например.

<ul id="navbar"> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#music">Music</a></li> 
    <li><a href="#writing">Writing</a></li> 
    <li style="float:right"><a href="#about">About</a></li> 
</ul> 

ul#navbar { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #bf5f5b; 
} 

ul#navbar li { 
    float: left; 
} 

ul#navbar li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

ul#navbar li a:hover { 
    background-color: #c46561; 
} 

ul#navbar Селектор будет только выбрать <ul> тег, который имеет id атрибут «NavBar».

Селектор ul#navbar li будет только выбрать <li> тег, который является дочерним элементом <ul> тега, который имеет id атрибут «NavBar».

Смотрите здесь для получения дополнительной информации о CSS селекторов: https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors