異なるCSSタグのプロパティ

Question

私はオーディンコースを通過中のウェブページ上で作業しており、HTMLリストを使用してページの上部にナビゲーションバーを作成しましたが、リスト全体を通常通り使用できるようにしたいと思いますページ。

HTMLでのクラス呼び出しでdivタグがどのように機能するかなど、設定された領域内でのみCSSプロパティのセットを呼び出す方法はありますか？

Heres the 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

ナビゲーションバーの<ul>タグにid属性を追加し、CSSの各liクラスの前にidを付けて、それらのタグのみを選択することができます。

例：

<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セレクタは、「ナビゲーションバー」のid属性を持つ<ul>タグを選択します。

ul#navbar liセレクタは、「ナビゲーションバー」のid属性を持つ<ul>タグの子である<li>タグを選択します。

CSSセレクタの詳細については、こちらを参照してください：https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors