css - Weebly：在导航栏中编辑单个元素

Question

我正在尝试在导航栏中编辑每个元素的边框顶部，以便我可以为每个元素设置不同的颜色。但是，当我跳转到 HTML 文件时，我只能在导航 div 中看到“{menu}”。我希望能够识别出每个单独的元素，以便我可以设置它的样式。谢谢！

Answer 1

您能否提供一个示例，说明如何使用 nth-child() 在 Weebly 中编辑单个导航项？

这是来自我的 Weebly 网站的代码，但我无法让它工作。我只是想绕过导航栏第一个菜单项的左上角。现在，当我单击不同的项目时，它会在左上角显示一个圆角。我总是希望左上角保持圆形。我是新手...

#topnav {
clear: both;
margin: 70px 0 0 150px;
-moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
}

#topnav ul {
list-style: none;
background: #404040;
width: 504px;
float: left;
}

#topnav li {
list-style: none;
display: inline-block;
margin: 0 auto; 
}

#topnav a {
float: left;
display: block;
color: #fff;
background: #404040;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 16px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 1em;
text-transform: uppercase;
font-weight: bold;
}

#topnav li#active a {
color: #fff;
background: #8fa944;
}

#topnav a:hover {
color: #fff;
background: #8fa944;
}

Answer 2

知道了！我用过：nth-​​child()。惊人的！