gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 01:17:06 24 4
gpt4 key购买 nike

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 分的选择器也会更改类选择中的元素。仅为该类更改元素的特定部分的正确方法是什么?谢谢

最佳答案

尝试添加 .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;
}

关于html - 仅在特定类下更改特定元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51757787/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com