仅在特定类下更改特定元素

Question

CSS新手。我遇到了一个问题，我只想改变一个类中的元素。我已经在网上看了很多方法，但我真的不知道这个问题是什么。

这是html部分：

<nav class = "choice">

    <ul>

                <li><a href="#">Sign-in</a></li>
                <li> | </li>
                <li><a href="register.html">Register</a></li>
                <li> | </li>    
                <li><a href="request.html">Request</a></li>
    </ul>

</nav>

<footer class = "footer">

        <h2>Site Map</h2>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="register.html">Register</a></li>
            <li><a class = "active" href="about.html">How it All Works</a></li>


            <section id = "copy">
            <p>&copy; 2018. All Rights Reserved.</p>
            </section>
        </ul>
</footer>

这是css：

.choice{

    text-align : right;


 }
   ul {
            list-style-type: none;
            margin: 0;
            padding: 1em;
            width: 200px;
            color:white;
        }

        li a {
                display: block;

                color: #00ff00;
                padding: 8px 16px;
                text-decoration: none;
        }
        li a.active {
            background-color: #4CAF50;
            color: white;
        }

        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }

        #copy{
            position: absolute;
            width: 100%;
            color: #fff;
            line-height: 40px;
            font-size:  1em;
            text-align: center;
            bottom:0;


        }

长话短说。我只想在类选项下更改元素“li”和“ul”，但因为页脚部分中有相同的元素，页脚部分的选择器也将更改类选择中的元素。仅为该类更改元素的特定部分的正确方法是什么？谢谢

Answer 1

尝试添加.choice以选择其下的元素：

.choice {
  text-align : right;
}
.choice ul {
  list-style-type: none;
  margin: 0;
  padding: 1em;
  width: 200px;
  color:white;
}

.choice li a {
  display: block;
  color: #00ff00;
  padding: 8px 16px;
  text-decoration: none;
}
.choice li a.active {
  background-color: #4CAF50;
  color: white;
}

.choice li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

#copy{
  position: absolute;
  width: 100%;
  color: #fff;
  line-height: 40px;
  font-size:  1em;
  text-align: center;
  bottom:0;
}

Answer 2

将.choice添加到要更改的CSS中的所有ul和li。

例如：.choice ul，.choice li > a，.choice li > a.active

以下是工作代码：

.choice {
  text-align: right;
}

.choice ul {
  list-style-type: none;
  margin: 0;
  padding: 1em;
  width: 200px;
  color: white;
}

.choice li > a {
  display: block;
  color: #00ff00;
  padding: 8px 16px;
  text-decoration: none;
}

.choice li > a.active {
  background-color: #4CAF50;
  color: white;
}

.choice li > a:hover:not(.active) {
  background-color: #555;
  color: white;
}

#copy {
  position: absolute;
  width: 100%;
  color: #fff;
  line-height: 40px;
  font-size: 1em;
  text-align: center;
  bottom: 0;
}

<nav class="choice">

  <ul>

    <li><a href="#">Sign-in</a></li>
    <li> | </li>
    <li><a href="register.html">Register</a></li>
    <li> | </li>
    <li><a href="request.html">Request</a></li>
  </ul>

</nav>

<footer class="footer">

  <h2>Site Map</h2>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="register.html">Register</a></li>
    <li><a class="active" href="about.html">How it All Works</a></li>


    <section id="copy">
      <p>&copy; 2018. All Rights Reserved.</p>
    </section>
  </ul>
</footer>