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

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”，但因为我在页 footer 分有相同的元素，页 footer 分的选择器也会更改类选择中的元素。仅为该类更改元素的特定部分的正确方法是什么？谢谢

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