html - 为导航栏的 css ul 和 li 元素添加不同的类

Question

我有一个网页，其中有两个不同的 UL 元素，每个元素都需要不同的 CSS 规则。其中一个 UL 元素是一个菜单栏，我一直试图向它添加一个样式名称，以便我可以将它与其他 UL 元素区分开来。当我这样做时，最终结果是一团糟。我已经在这个网站和谷歌上搜索了几个小时，但无论我更改代码的哪一部分，都找不到解决方案。

适用于没有类名的菜单的代码是:

#menuBackground {
position: fixed;
top: 0;
background:#0ab2aa;
width:100%;
height:50px;
text-align: center;
z-index: 999;
}
#menuContainer {
text-align: center;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
vertical-align: top;
margin-right:1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:120px;
height:50px;
text-align: center;
line-height:50px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
color:#fff;
background:#0ab2aa;
text-decoration:none;
font-size: 1rem;
}
.drop a{
display:block;
min-width:120px;
height:50px;
text-align: left;
line-height:50px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
color:#fff;
background:#2f3036;
text-decoration:none;
font-size: 1rem;
}
/*Hover state for top level links*/
li:hover a {
background:#0ab2aa
}
/*Style for dropdown links*/
li:hover ul a {
background:#f3f3f3;
color:#2f3036;
height:40px;
line-height:40px
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background:#0ab2aa;
color:#fff
}
/*Hide dropdown links until they are needed*/
li ul {
position: absolute;
display:none
}
/*Make dropdown links vertical*/
li ul li {
display:block;
}
/*Prevent text wrapping*/
li ul li a {
width:auto;
min-width:100px;
padding:0 10px
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden,.hidden:hover {
display:block
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration:none;
color:#fff;
background:#0ab2aa;
text-align:left;
padding: 16px 0;
display:none;
width:100%!important
}

/*Hide checkbox*/
input[type=checkbox] {
display:none
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display:block;
margin:0 auto
}

/*Responsive Styles*/
@media screen and (max-width : 1007px) {
/*Make dropdown links appear inline*/
ul {
position:static;
display:none;
white-space: initial;
}

/*Create vertical spacing*/
li {
margin-bottom:1px
}

/*Make all menu links full width*/
ul li,li a {
width:100%
}

/*Display 'show menu' link*/
.show-menu {
display:block
}
}

但是当我尝试添加类名 nav-li 和 nav-ul 时，如果我将其更改为(许多不同尝试之一):

#menuBackground {
position: fixed;
top: 0;
background:#0ab2aa;
width:100%;
height:50px;
text-align: center;
z-index: 999;
}
#menuContainer {
text-align: center;
}
/*Strip the ul of padding and list styling*/
.nav-ul{
list-style-type:none;
margin:0;
padding:0;
}
/*Create a horizontal list with spacing*/
.nav-li {
display:inline-block;
vertical-align: top;
margin-right:1px;
}
/*Style for menu links*/
.nav-li a {
display:block;
min-width:120px;
height:50px;
text-align: center;
line-height:50px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
color:#fff;
background:#0ab2aa;
text-decoration:none;
font-size: 1rem;
}
.drop a{
display:block;
min-width:120px;
height:50px;
text-align: left;
line-height:50px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
color:#fff;
background:#2f3036;
text-decoration:none;
font-size: 1rem;
}
/*Hover state for top level links*/
.nav-li:hover a {
background:#0ab2aa
}
/*Style for dropdown links*/
.nav-li:hover, .nav-ul a {
background:#f3f3f3;
color:#2f3036;
height:40px;
line-height:40px
}
/*Hover state for dropdown links*/
.nav-li:hover, .nav-ul a:hover {
background:#0ab2aa;
color:#fff
}
/*Hide dropdown links until they are needed*/
.nav-li, .nav-ul {
position: absolute;
display:none
}
/*Make dropdown links vertical*/
.nav-li, .nav-ul li {
display:block;
}
/*Prevent text wrapping*/
.nav-li, .nav-ul li a {
width:auto;
min-width:100px;
padding:0 10px
}
/*Display the dropdown on hover*/
.nav-ul li a:hover + .hidden,.hidden:hover {
display:block
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration:none;
color:#fff;
background:#0ab2aa;
text-align:left;
padding: 16px 0;
display:none;
width:100%!important
}
/*Hide checkbox*/
input[type=checkbox] {
display:none
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display:block;
margin:0 auto
}
/*Responsive Styles*/
@media screen and (max-width : 1007px) {
/*Make dropdown links appear inline*/
.nav-ul {
position:static;
display:none;
white-space: initial;
}
/*Create vertical spacing*/
.nav-li {
margin-bottom:1px
}
/*Make all menu links full width*/
.nav-ul li, .nav-li a {
width:100%
}
/*Display 'show menu' link*/
.show-menu {
display:block
}
}

显示错误。 (这个版本看不到导航链接，其他版本有不同的错误)

html代码是:

<div id="menuBackground">
<div id="menuContainer">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button" />
<ul class="nav-ul" id="menu">
<li class="nav-li"><a href="index.php">Home</a>
</li>
<li class="nav-li">
<a href="about.php">About</a>
</li>
<li class="nav-li">
<a href="#">Projects</a>
<ul class="hidden">
<li class="drop"><a href="project1.php">Handyman</a></li>
<li class="drop"><a href="project2.php">Barrhill in Bloom</a></li>
<li class="drop"><a href="project3.php">Youth Club</a></li>
<li class="drop"><a href="project3.php">Coffee morning</a></li>
</ul>
</li>
<li class="nav-li"><a href="hall.php">Hall</a>
</li>
<li class="nav-li"><a href="hall.php">Newsletters</a>
</li>
<li class="nav-li"><a href="meetings.php">Meetings</a>
</li>
<li class="nav-li"><a href="news.php">News</a>
</li>
<li class="nav-li"><a href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>

我知道这可能很简单，但我一直在尝试很多不同的东西(我现在有 24 个版本的 CSS 文件)但没有任何效果。

我假设必须有一种格式可以将类名添加到具有多个元素的 CSS 代码，例如 li ul li{}，但我似乎找不到实现它的方法。将其更改为 .nav-li, .nav-ul li{} 似乎不起作用。这让我发疯。

我确实希望有人能提供帮助。

非常感谢，

图

Answer 1

使用直接子选择器来仅设置某些嵌套元素的样式:

您实际上不需要 nav-ul 和 nav-li 的类。如果您只想使用 CSS 来完成此操作，您可以使用直接子选择器“>”仅定位选定的元素。直接的 child 选择器只会影响直接的 child 。即，如果您执行#menu > li。只有#menu 的直接子项(li 项)会收到样式:

这意味着您可以将第一级 nav-li 定位为:

#menu > li { 
...styling goes here 
}

此外，您可以将第二级 li 定位为:

#menu > li > ul > li { 
...styling goes here 
}

这将确保您的样式对于两个嵌套列表元素都是分开的。

希望这对您有所帮助。