css结构伪类

时间：2015-04-09 14:55:46

标签： css asp.net css3 css-selectors

我想在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;
}

但它会将第一级项目的所有边框更改为红色

任何帮助，请

1 个答案:

答案 0 :(得分：0)

您可以使用>组合子定位元素的直接子元素。 [source]

＆＃13;
＆＃13; 
.AspNet-Menu > li > .AspNet-Menu-Link {
  border-color: red;
  border-width: 0px 0px 2px 0px;
  border-style: solid;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题