我遇到了一个奇怪的问题,与:first-child和:last-child选择器有关。当我将它应用于子菜单链接时,它会应用于所有子菜单链接。我只需要在子菜单中的第一个和最后一个链接上创建不同的效果。
这是HTML代码:
<nav id="menu">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li>
<a href="#">3</a>
<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
<li><a href="#">sub4</a></li>
</ul>
</li>
<li><a href="#">4</a></li></li>
</ul>
</nav>
这是CSS代码:
nav#menu{ width:100%; text-align:center; z-index:999; }
nav#menu li{ display:inline-block; }
nav#menu li.voltar{ display:none; }
nav#menu a{ display:block; padding:0.75rem 1.3rem; font-size:0.7rem; }
nav#menu li:hover a{ background:#00afef; color:#fff; }
nav#menu li ul{ display:none; }
nav#menu li:hover ul{ display:block; position:absolute; width:12rem; }
nav#menu li ul li{ display:block; }
nav#menu li ul li a{ border-bottom:#0098df solid 1px; }
nav#menu li ul li:hover a{ background:#0064ba; }
我尝试过。
nav#menu li ul li a:first-child{ color:red; }
nav#menu li ul li a:last-child{ color:blue; }
但这适用于所有人。 = /