我想在 asp.net 中获取菜单的第一级以更改边框底部颜色,第一级中的每个项目都将具有边框底部颜色这是生成的 html
<div id="menu">
<div class="PrettyMenu">
<div class="AspNet-Menu-Horizontal">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ctl00$Menu1','bRessources Humaines')" class="AspNet-Menu-Link">G.R.H</a>
<ul>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ctl00$Menu1','bRessources Humaines\Employés')" class="AspNet-Menu-Link">
Employés</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="employe/listeemployee.aspx" class="AspNet-Menu-Link">
Employé</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="employe/fonction.aspx" class="AspNet-Menu-Link">
Fonctions</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ctl00$Menu1','bRessources Humaines\Formations')" class="AspNet-Menu-Link">
Formations</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="Formation/Listeformation.aspx" class="AspNet-Menu-Link">
Planning</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Formation/Listedemandeformation.aspx" class="AspNet-Menu-Link">
Demandes de formation</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-Leaf">
<a href="employe/RemplacerPersonne.aspx" class="AspNet-Menu-Link">
Remplacer personne</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ctl00$Menu1','bDocumentations')" class="AspNet-Menu-Link">
Documentation</a>
<ul>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ctl00$Menu1','bDocumentations\Documents Internes')" class="AspNet-Menu-Link">
Documents internes</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="Documentation/DocumentInterne.aspx" class="AspNet-Menu-Link">
Mes documents internes</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Documentation/Fiche_DocumentPrime.aspx" class="AspNet-Menu-Link">
DI périmés</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Documentation/boite_dialogue.aspx" class="AspNet-Menu-Link">
Boîte de dialogue</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Documentation/Fiche_Document.aspx" class="AspNet-Menu-Link">
Création, Modification</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ctl00$Menu1','bAudits')" class="AspNet-Menu-Link">
Audits</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="Audit/listeaudite.aspx" class="AspNet-Menu-Link">
Audits1</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Audit/AuditeurExterne.aspx" class="AspNet-Menu-Link">
Auditeurs externes</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ctl00$Menu1','bActions')" class="AspNet-Menu-Link">
Actions</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="action/listeaction.aspx" class="AspNet-Menu-Link">
Actions1</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="action/listedemandeaction.aspx" class="AspNet-Menu-Link">
Demandes d'actions</a>
</li>
</ul>
</li>
<a href="javascript:__doPostBack('ctl00$Menu1','bGénérateur de rapports')" class="AspNet-Menu-Link">
Générateur</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="Generateur/generateur.aspx" class="AspNet-Menu-Link">
Création</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Generateur/generateur_edition.aspx" class="AspNet-Menu-Link">
Edition</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
因此,请寻找一种更改每个项目的边框颜色的方法带有红色边框的 G.R.H带有蓝色边框的文档我现在使用这个 CSS
.AspNet-Menu-Link:nth-child(1)
{
border-bottom-color: red;
}
但它会将第一级项目的所有边框更改为红色
请提供任何帮助
您可以使用组合
器定位元素的直接子元素>
子元素。[来源]
.AspNet-Menu > li > .AspNet-Menu-Link {
border-color: red;
border-width: 0px 0px 2px 0px;
border-style: solid;
}
<div id="menu">
<div class="PrettyMenu">
<div class="AspNet-Menu-Horizontal">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ctl00$Menu1','bRessources Humaines')" class="AspNet-Menu-Link">G.R.H</a>
<ul>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ctl00$Menu1','bRessources Humaines\Employés')" class="AspNet-Menu-Link">
Employés</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="employe/listeemployee.aspx" class="AspNet-Menu-Link">
Employé</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="employe/fonction.aspx" class="AspNet-Menu-Link">
Fonctions</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ctl00$Menu1','bRessources Humaines\Formations')" class="AspNet-Menu-Link">
Formations</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="Formation/Listeformation.aspx" class="AspNet-Menu-Link">
Planning</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Formation/Listedemandeformation.aspx" class="AspNet-Menu-Link">
Demandes de formation</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-Leaf">
<a href="employe/RemplacerPersonne.aspx" class="AspNet-Menu-Link">
Remplacer personne</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ctl00$Menu1','bDocumentations')" class="AspNet-Menu-Link">
Documentation</a>
<ul>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ctl00$Menu1','bDocumentations\Documents Internes')" class="AspNet-Menu-Link">
Documents internes</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="Documentation/DocumentInterne.aspx" class="AspNet-Menu-Link">
Mes documents internes</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Documentation/Fiche_DocumentPrime.aspx" class="AspNet-Menu-Link">
DI périmés</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Documentation/boite_dialogue.aspx" class="AspNet-Menu-Link">
Boîte de dialogue</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Documentation/Fiche_Document.aspx" class="AspNet-Menu-Link">
Création, Modification</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ctl00$Menu1','bAudits')" class="AspNet-Menu-Link">
Audits</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="Audit/listeaudite.aspx" class="AspNet-Menu-Link">
Audits1</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Audit/AuditeurExterne.aspx" class="AspNet-Menu-Link">
Auditeurs externes</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:__doPostBack('ctl00$Menu1','bActions')" class="AspNet-Menu-Link">
Actions</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="action/listeaction.aspx" class="AspNet-Menu-Link">
Actions1</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="action/listedemandeaction.aspx" class="AspNet-Menu-Link">
Demandes d'actions</a>
</li>
</ul>
</li>
<a href="javascript:__doPostBack('ctl00$Menu1','bGénérateur de rapports')" class="AspNet-Menu-Link">
Générateur</a>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="Generateur/generateur.aspx" class="AspNet-Menu-Link">
Création</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Generateur/generateur_edition.aspx" class="AspNet-Menu-Link">
Edition</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>