文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >css结构伪类

问css结构伪类
EN

Stack Overflow用户
提问于 2015-04-09 22:55:46
回答 1查看 94关注 0票数 0

我想让我的菜单的第一级在asp.net中更改边框底部颜色，第一级中的每个项目都将有边框底部颜色这是生成的html

代码语言：javascript
复制
<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

代码语言：javascript
复制
.AspNet-Menu-Link:nth-child(1) 
{
 border-bottom-color: red;
}

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

请帮个忙

css
css-selectors
asp.net
EN

回答 1

Stack Overflow用户

发布于 2015-04-09 23:59:06

您可以使用>组合器将元素的直接子元素作为目标。[source]

​

代码语言：javascript
复制
.AspNet-Menu > li > .AspNet-Menu-Link {
  border-color: red;
  border-width: 0px 0px 2px 0px;
  border-style: solid;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/29541956

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档