Unterschiedliche CSS-Tag-Eigenschaften

Question

Ich arbeite gerade an einer Webseite, während ich den Odin-Kurs durchführe und oben auf meiner Seite eine Navigationsleiste mit HTML-Listen erstellt habe. Trotzdem möchte ich normalerweise Listen verwenden können Die Seite.

Gibt es eine Möglichkeit, eine Gruppe von CSS-Eigenschaften nur innerhalb eines festgelegten Bereichs aufzurufen, wie div-Tags zum Aufrufen von Klassen in HTML?

Heres die HTML and CSS in jsfiddle oder darunter.

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

ich entschuldige mich, wenn dies eine einfache Frage, aber ich suchte herum und konnte nicht finden und Antwort.

Answer 1

Sie können ein Attribut id zu Ihrer Navigationsleiste hinzufügen <ul> Tag, dann setzen Sie die ID vor jeder li Klasse in Ihrem CSS nur diese Tags auswählen.

Eg.

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

Der ul#navbar Selektor wird ein <ul> Tag nur wählen, die ein id Attribut "navbar" hat.

Der ul#navbar li Selektor nur wählen Sie ein <li>-Tag, das ein Kind eines <ul>-Tag ist, das ein id Attribut „navbar“ hat.

Sehen Sie hier für weitere Informationen über CSS-Selektoren: https://developer.mozilla.org/en/docs/Web/Guide/CSS/Getting_started/Selectors