Styling der Fußzeile ändert Kopfzeile Elternelement

Question

Ich bin neu im Front-End-Zeug und habe ein bisschen einen Moment versucht, die Fußzeile auf meinem Projekt zu stylen.

Meine Kopf- und Fußzeile sind beide konstruiert unter Verwendung eines (UL LI und UL LI a)

Problem: Wenn ich versuche und Stil der Fußzeile mit CSS des Header auch mit dem gleichen Styling entsprechend geändert wird.

Wie sollte ich die Fußzeile in Bezug auf die Codierung ändern, so dass wenn ich Styling anwenden, ändert es nicht das Header/Elternelement.

Kopf

<nav class="navbar navbar-static-top navbar-default" role="navigation"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="/"> 
     <img alt="Nippon Beauty" class="navbar-brand-icon" src="assets/nippon.svg"> 
    </a> 

    </div> 

    <!--<span style="color: #53100e">| Japanese and South Korean Luxury Skincare</span> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><%= link_to "Home", root_path %></li> 
     <li><%= link_to "About", about_path %></li> 
     <li><%= link_to "Login", new_user_session_path %></li> 
     <li><%= link_to "Signup", new_user_registration_path %></li> 
     <% if user_signed_in? %> 
     <li><%= link_to "Account Settings", edit_user_registration_path %></li> 
     <li><%= link_to "Log out", destroy_user_session_path, method: :delete %></li> 
     <% else %> 
    <% end %> 
    </ul> 
    </div><!-- /.navbar-collapse --> 
</nav> 

Footer

<div class="row bottom-footer text-center-mobile"> 
    <ul> 
     <li><a href="#">Contact Us</a></li> 
     <li><a href="#">Returns Policy</a></li> 
     <li><a href="#">Terms and Conditions</a></li> 
     <li><a href="#">Privacy Policy</a></li> 
     <li><a href="#">FAQ</a></li> 
    </ul> 
</div> 

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:400,700); 

$body-bg:       #ecf0f1; 
$font-family-sans-serif:   'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
$navbar-height:     70px; 
$navbar-default-bg:    white; 
$navbar-default-brand-color:  #c0392b; 
$brand-primary:     #c0392b; 
$jumbotron-bg:      white; 

@import 'bootstrap'; 
@import 'bootstrap-sprockets'; 

.center { 
    text-align: center; 
} 

.navbar-brand { 
    font-weight: bold; 
} 


.btn-lg { 
    padding: 18px 28px; 
    font-size: 22px; 
    border-radius: 8px; 
    } 


.jumbotron { 
    width: 735px; 
    padding-left: 30px; 
    padding-right: 15px; 
    padding-bottom: 20px; 
    padding-top: 20px; 
} 

.container .jumbotron { 
    border-radius: 35px; 
} 


.container { 
    width: 1270px; 
} 


.navbar { 
    min-height: 90px; 
} 

.navbar-brand { 
    float: left; 
    padding: 10px 15px; 
    font-size: 14px; 
    font-weight: normal; 
} 

.navbar-brand img { 
    display: inline-block; 
} 


.navbar-brand span { 
    display:inline-block; 
    vertical-align : middle; 
    height: 7px; 
} 


h1, { 
    font-family: 'Lobster', cursive; 
    color: #e22f8f; 
} 


.row { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 1rem; 
    background-color: #efefef; 
    text-align: center; 
} 



li { 
    display: inline-block; 
    *display: inline; 
    padding: 4px; 
    color: #e22f8f; 
    } 

Answer 1

Der einzige Weg, warum Ihr Kopf Änderungen mit Fußzeile möglicherweise wegen ul und li seines Styling. Sie sollten für diese Elemente eine ID oder Klasse festlegen, die Sie statt und li formatieren und anwenden müssen.
Durch das Anwenden von CSS auf ul und li wird jedes Element dieses Typs auf der gesamten Webseite geändert. Das Anwenden von CSS auf ID oder Klasse wirkt sich nur auf das ausgewählte Element aus.

• UPDATE

Versuchen zu stilisieren .navbar-li und .footer-li Ich habe in CSS:

Kopf

<nav class="navbar navbar-static-top navbar-default" role="navigation"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="/"> 
     <img alt="Nippon Beauty" class="navbar-brand-icon" src="assets/nippon.svg"> 
    </a> 

    </div> 

    <!--<span style="color: #53100e">| Japanese and South Korean Luxury Skincare</span> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="navbar-li"><%= link_to "Home", root_path %></li> 
     <li class="navbar-li"><%= link_to "About", about_path %></li> 
     <li class="navbar-li"><%= link_to "Login", new_user_session_path %></li> 
     <li class="navbar-li"><%= link_to "Signup", new_user_registration_path %></li> 
     <% if user_signed_in? %> 
     <li class="navbar-li"><%= link_to "Account Settings", edit_user_registration_path %></li> 
     <li class="navbar-li"><%= link_to "Log out", destroy_user_session_path, method: :delete %></li> 
     <% else %> 
    <% end %> 
    </ul> 
    </div><!-- /.navbar-collapse --> 
</nav> 

Footer

<div class="row bottom-footer text-center-mobile"> 
    <ul> 
     <li class="footer-li"><a href="#">Contact Us</a></li> 
     <li class="footer-li"><a href="#">Returns Policy</a></li> 
     <li class="footer-li"><a href="#">Terms and Conditions</a></li> 
     <li class="footer-li"><a href="#">Privacy Policy</a></li> 
     <li class="footer-li"><a href="#">FAQ</a></li> 
    </ul> 
</div> 

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:400,700); 

$body-bg:       #ecf0f1; 
$font-family-sans-serif:   'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
$navbar-height:     70px; 
$navbar-default-bg:    white; 
$navbar-default-brand-color:  #c0392b; 
$brand-primary:     #c0392b; 
$jumbotron-bg:      white; 

@import 'bootstrap'; 
@import 'bootstrap-sprockets'; 

.center { 
    text-align: center; 
} 

.navbar-brand { 
    font-weight: bold; 
} 


.btn-lg { 
    padding: 18px 28px; 
    font-size: 22px; 
    border-radius: 8px; 
    } 


.jumbotron { 
    width: 735px; 
    padding-left: 30px; 
    padding-right: 15px; 
    padding-bottom: 20px; 
    padding-top: 20px; 
} 

.container .jumbotron { 
    border-radius: 35px; 
} 


.container { 
    width: 1270px; 
} 


.navbar { 
    min-height: 90px; 
} 

.navbar-brand { 
    float: left; 
    padding: 10px 15px; 
    font-size: 14px; 
    font-weight: normal; 
} 

.navbar-brand img { 
    display: inline-block; 
} 


.navbar-brand span { 
    display:inline-block; 
    vertical-align : middle; 
    height: 7px; 
} 


h1, { 
    font-family: 'Lobster', cursive; 
    color: #e22f8f; 
} 


.row { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 1rem; 
    background-color: #efefef; 
    text-align: center; 
} 


.navbar-li { 
} 

.footer-li { 
}