我正在自学html/css,请像个假人一样给我解释一下(呼!)
帮助消除我试图在无序列表中定位我的列表项的疑虑.我意识到不能应用 colored颜色 属性,但应用了如下所示的字体大小属性.但是,当我在<li>
个标签之后添加<a>
个标签时,应用了 colored颜色 属性.我期待着理解为什么,而不是使用试错法.谢谢.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
height: 80px;
background: gray;
}
.navbar .nav-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .nav-wrapper .logo a {
text-decoration: none;
font-size: 30px;
font-weight: 700;
color: orangered;
margin-top: -70px;
}
.navbar .nav-wrapper .navlist ul {
list-style: none;
}
/* FOCUS HERE */
.navbar .nav-wrapper .navlist ul li {
display: inline-block;
margin: 30px;
font-size: 20px;
color: #fff;
}
<nav class="navbar">
<div class="nav-wrapper">
<div class="logo">
<a href="#">
<h3>champ</h3>
</a>
</div>
<div class="navlist">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Visit</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
<div class="navbuttons">
<button>Login</button>
<button>Logout</button>
</div>
</div>
</nav>
我想,如果字体大小如此有效,那么连 colored颜色 都应该有效.