Question

我是前端的新手，并且正在努力为我的项目设计页脚。

我的页眉和页脚都是使用（UL LI和UL LI a）构建的

问题：当我尝试使用CSS设置页脚样式时，标题也会相应地使用相同的样式进行更改。

如何在编码方面修改页脚，以便在对其应用样式时，不会更改页眉/父元素。

标题

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

页脚

<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

标题随页脚更改的唯一方法可能是样式ul和li。您应为样式化设置这些元素的ID或类，并为其设置样式，而不是ul和li。
在ul和li上应用CSS会在整个网页上更改此类型的每个元素。在id或class上应用CSS时，只会影响所选元素。

更新

尝试在CSS中添加.navbar-li和.footer-li样式：

标题

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

页脚

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

样式页脚更改标题父元素

1 个答案: