好吧，我很抱歉这个问题很傻，而且很具体，但我就是想不明白。
我只是想给两个定位为:<nav><ul><li><a href="">text</a></li></ul></nav>的<li>元素设置样式。另外，我想把页脚的样式设置为白色。
我不知道我的代码出了什么问题，是什么阻止了它的发生。
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
html,
body {
height: 100vh;
font-family: 'Roboto', sans-serif;
color: #ffffff;
background-color: #0e2a47;
}
.Titlebanner {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-color: #48ffd5;
border-radius: 1em;
}
.Titlebanner h1>a {
color: #ffffff;
font-weight: 700;
font-size: 2em;
text-decoration: none;
border-bottom: 2px solid #48ffd5;
}
ul {
display: flex;
flex-direction: row;
justify-content: center;
list-style: none;
padding: 0;
}
nav li {
list-style: none;
display: flex;
margin: 2em;
padding: 1em;
border-radius: 1em;
border: 2px solid #48ffd5;
}
/* --------------Here is what I’ve tried to modify but doesn’t work-------*/
a:hover,
a:visited,
a:link,
a:active {
color: white;
text-decoration: none;
}
/*---------------------------------------*/
.body {
display: flex;
flex-direction: row;
}
.ranking {
width: 8%;
height: 4em;
background-color: grey;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0.5em;
}
.ranking>ul {
padding: 0;
display: flex;
flex-direction: column;
}
.ranking>ul>li {
margin: auto
}
.Analysis {
display: flex;
flex-direction: row;
margin: auto;
width: 80%;
justify-content: center;
text-align: justify;
}
/*---------------------- and here for the footer -------*/
footer>a {
display: block;
width: 30%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: white;
}
/*-----------------------------------------------*/<body>
<header>
<div class="Titlebanner">
<h1><a href="index.html">Impact of Privacy Policies on Users’ Lives</a></h1>
</div>
<!------------- here is the part I’m trying to style----->
<nav>
<ul>
<li><a href="result.html">Results</a></li>
<li><a href="analysis.html">Analysis</a></li>
</ul>
</nav>
<!----------------------------------------------------->
</header>
<div class="body">
<div class="ranking" id="ranking">
<ul>
<li>First Place</li>
<li>Second Place</li>
</ul>
</div>
<div class="Analysis">
text
</div>
</div>
</body>
<!----------------- and the footer I’m trying to style as well------->
<footer>
<span class="">
<a href="">About us</a>
</span>
</footer>
<!------------------------------------------------------------->您正在尝试访问在页脚中直接使用footer a或footer > span > a的标记
我不知道为什么你的标题样式不工作，我想这与特异性有关，尝试简化你的选择器header > h1 > a到header a，并将a:hover更改为header a:hover
在命名类时也尽量不要使用大写符号