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>© 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”,但是由于我在页脚部分具有相同的元素,因此页脚部分的选择器也将更改类选择中的元素。仅为该类更改元素的特定部分的正确方法是什么?谢谢
答案 0 :(得分:0)
尝试添加.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;
}
答案 1 :(得分:0)
向您要更改的CSS中的所有.choice
和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>© 2018. All Rights Reserved.</p>
</section>
</ul>
</footer>